Ответ 1
Если вы положите padding = 1 и цвет фона в LinearLayout, у вас будет желтая рамка 1px.
У меня есть ячейка с фиксированной шириной и высотой, пусть она будет 100x100px. Внутри этой ячейки я хочу отобразить ImageView
с рамкой.
Моя первая идея заключалась в том, чтобы поместить фоновый ресурс в ImageView
и добавить дополнение 1dp для создания эффекта границы:
<LinearLayout
android:layout_width="100dp"
android:layout_height="100dp" >
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/image_border"
android:padding="1dp"
android:src="@drawable/test_image" />
</LinearLayout>
По-видимому, это должно работать, но это не так или, по крайней мере, не так, как ожидалось.
Проблема в том, что фон ImageView заполняет все пространство ячейки 100x100px, поэтому, если ширина изображения меньше 100 пикселей, верхняя и нижняя границы будут больше.
Обратите внимание на желтую рамку, мне нужно, чтобы она была ровно 1 пиксель вокруг ImageView:
Любая помощь, идея, предложение любого рода очень ценится.
Если вы положите padding = 1 и цвет фона в LinearLayout, у вас будет желтая рамка 1px.
Вот что сработало для меня...
<!-- @drawable/image_border -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/colorPrimary"/>
<stroke android:width="1dp" android:color="#000000"/>
<padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp"/>
</shape>
<ImageView
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:padding="1dp"
android:cropToPadding="true"
android:scaleType="centerCrop"
android:background="@drawable/image_border"/>
Здесь это результат, который я получаю с помощью viewpager и imageview с рамкой.
Если изображения имеют переменный размер, вы всегда получите этот эффект. Думаю, вам нужно установить фиксированный размер для ImageView и дать ему заданный цвет фона - от внешнего вида вашего примера черный будет иметь смысл. Оберните изображение в FrameLayout или просто изображение с желтым фоном и отступом 1px.
ИЗМЕНИТЬ
Я подумал об этом, и мой ответ не чувствовал себя так...
Если вы установите каждый ImageView с фиксированным размером, отступом и запасом. а затем установите цвет фона по мере необходимости, вы можете получить необходимый эффект.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="fill_parent" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#52D017"
android:padding="1dp"
android:layout_margin="5dp"
android:src="@drawable/test1"
tools:ignore="ContentDescription" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:background="#52D017"
android:padding="1dp"
android:src="@drawable/test2"
tools:ignore="ContentDescription" />
</LinearLayout>
На скриншоте оба отображаемых изображения имеют ширину менее 100 пикселей и разные высоты.
Это не обрабатывает изображения с прозрачным фоном, а затем (в этом случае) проходит желтый зеленый цвет. Вы можете решить эту проблему, обернув каждый ImageView в FrameLayout. Создание черного фона ImageView и установка FrameLayout на WrapContent с требуемым заполнением (я думаю)
вы можете использовать пользовательское изображение, откуда вы можете получить границу, вот код. вы также можете изменить ширину прокладки и ширину хода в соответствии с вашими потребностями. Это указано чуть ниже первой строки кода, спасибо
public class FreeCollage extends ImageView {
private static final int PADDING = 8;
private static final float STROKE_WIDTH = 5.0f;
private Paint mBorderPaint;
public FreeCollage(Context context) {
this(context, null);
}
public FreeCollage(Context context, AttributeSet attrs) {
this(context, attrs, 0);
setPadding(PADDING, PADDING, PADDING, PADDING);
}
public FreeCollage(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initBorderPaint();
}
private void initBorderPaint() {
mBorderPaint = new Paint();
mBorderPaint.setAntiAlias(true);
mBorderPaint.setStyle(Paint.Style.STROKE);
mBorderPaint.setColor(Color.WHITE);
mBorderPaint.setStrokeWidth(STROKE_WIDTH);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawRect(PADDING, PADDING, getWidth() - PADDING, getHeight() - PADDING, mBorderPaint);
}
}
Просто добавьте свойство adjustViewBounds в ImageView.
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/image_border"
android:padding="1dp"
android:adjustViewBounds="true"
android:src="@drawable/test_image" />
Обратите внимание, что android:adjustViewBounds="true"
работает только с android:layout_width
и android:layout_height
, установленным в "wrap_content".
Это то, что сработало для меня:
<ImageView
android:id="@+id/dialpad_phone_country_flag"
android:layout_width="22dp"
android:layout_height="15dp"
android:scaleType="fitXY"
android:background="@color/gen_black"
android:padding="1px"/>
просто добавьте строку ниже в макет ImageView
если layout_width и layout_height изображения не совпадают с использованием,
android:adjustViewBounds = "true"
или
android:adjustViewBounds = "true"
android:scaleType="fitXY"
или
android:adjustViewBounds = "true"
android:scaleType="centerCrop"
Ниже приведен фрагмент кода, который я использовал в своем простейшем решении.
<FrameLayout
android:layout_width="112dp"
android:layout_height="112dp"
android:layout_marginLeft="16dp" <!-- May vary according to your needs -->
android:layout_marginRight="16dp" <!-- May vary according to your needs -->
android:layout_centerVertical="true">
<!-- following imageView acts as the boarder which sitting in the background of our main container ImageView -->
<ImageView
android:layout_width="112dp"
android:layout_height="112dp"
android:background="#000"/>
<!-- following imageView holds the image as the container to our image -->
<!-- layout_margin defines the width of our boarder, here it 1dp -->
<ImageView
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_margin="1dp"
android:id="@+id/itemImageThumbnailImgVw"
android:src="@drawable/banana"
android:background="#FFF"/>
</FrameLayout>
Если вам нужны дополнительные объяснения, посмотрите следующую ссылку , где я объяснил бы это достаточно хорошо.
Надеюсь, это может быть полезно для вас, кто там!
Ура!
Вам нужно добавить scalylele в ваше изображение. После этого ваше изображение будет соответствовать.
Android: scaleType = "fitXY"