Как создать ListView с закругленными углами в Android?
Как создать ListView с закругленными углами в Android?
Ответ 1
Вот один из способов сделать это (спасибо Android Documentation, хотя!):
Добавьте следующее в файл (скажем, customhape.xml), а затем поместите его в (res/drawable/customshape.xml)
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#SomeGradientBeginColor"
android:endColor="#SomeGradientEndColor"
android:angle="270"/>
<corners
android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp"/>
</shape>
Как только вы закончите создание этого файла, просто установите фон одним из следующих способов:
Через код:
listView.setBackgroundResource(R.drawable.customshape);
Через XML просто добавьте в контейнер следующий атрибут (например: LinearLayout или любые поля):
android:background="@drawable/customshape"
Надеюсь, что кто-то сочтет это полезным...
Ответ 2
Хотя это и сработало, он также взял весь цвет фона. Я искал способ сделать только границу и просто заменить этот код макета XML этим, и я был готов к работе!
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="4dp" android:color="#FF00FF00" />
<padding android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
<corners android:radius="4dp" />
</shape>
Ответ 3
@Kris-ван-Бейл
Для тех, у кого есть проблемы с выделенными выделениями для верхней и нижней строки, где появляется прямоугольник фона при выборе, вам нужно установить селектор для вашего списка в прозрачный цвет.
listView.setSelector(R.color.transparent);
В color.xml просто добавьте следующее -
<color name="transparent">#00000000</color>
Ответ 4
Другой способ, который я нашел, - это замаскировать ваш макет, рисуя изображение поверх макета. Это может помочь вам. Просмотрите округлые угловые углы Android XML
Ответ 5
Еще одно решение для выбора выделяет проблемы с первым и последним элементами в списке:
Добавьте дополнение в верхнюю и нижнюю часть вашего списка, равную или превышающую радиус. Это гарантирует, что выделение выделения не будет перекрываться с вашими кривыми угла.
Это самое простое решение, когда вам нужна непрозрачная подсветка выделения.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="@color/listbg" />
<stroke
android:width="2dip"
android:color="#D5D5D5" />
<corners android:radius="10dip" />
<!-- Make sure bottom and top padding match corner radius -->
<padding
android:bottom="10dip"
android:left="2dip"
android:right="2dip"
android:top="10dip" />
</shape>
Ответ 6
На самом деле, я думаю, лучшее решение описано по этой ссылке:
http://blog.synyx.de/2011/11/android-listview-with-rounded-corners/
вкратце, он использует другой фон для верхнего, среднего и нижнего элементов, так что верхний и нижний будут округлены.
Ответ 7
Другие ответы очень полезны, благодаря авторам!
Но я не мог понять, как настроить прямоугольник, выделяя элемент при выборе, а не отключая подсветку @alvins @bharat dojeha.
Следующее работает для меня, чтобы создать контейнер элементов с закругленным списком без контура и светло-серый, если выбран из одной и той же формы:
Ваш xml должен содержать селектор, такой как, например, (в res/drawable/customshape.xml):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:width="8dp" android:color="@android:color/transparent" />
<padding android:left="14dp" android:top="14dp"
android:right="14dp" android:bottom="14dp" />
<corners android:radius="10dp" />
<gradient
android:startColor="@android:color/background_light"
android:endColor="@android:color/transparent"
android:angle="225"/>
</shape>
</item>
<item android:state_pressed="false">
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:width="8dp" android:color="@android:color/transparent" />
<padding android:left="14dp" android:top="14dp"
android:right="14dp" android:bottom="14dp" />
<corners android:radius="10dp" />
<gradient
android:startColor="@android:color/darker_gray"
android:endColor="@android:color/transparent"
android:angle="225"/>
</shape>
</item>
Затем вам нужно реализовать адаптер списка и переопределить метод getView, чтобы установить пользовательский селектор в качестве фона
@Override
public View getView(int position, View convertView, ViewGroup parent) {
//snip
convertView.setBackgroundResource(R.drawable.customshape);
//snip
}
и нужно также "скрыть" прямоугольник селектора по умолчанию, например, в onCreate (я также спрячу свою тонкую серая разделительную линию между элементами):
listView.setSelector(android.R.color.transparent);
listview.setDivider(null);
Этот подход решает общее решение для drawables, а не только ListViewItem с различными состояниями выбора.
Ответ 8
чтобы сделать границу u, нужно сделать еще один файл xml с свойством твердого тела и углами в выпадающей папке и называть его фоном
Ответ 9
Это было невероятно удобно для меня. Я хотел бы предложить другое обходное решение, чтобы отлично выделить закругленные углы, если вы используете свой собственный CustomAdapter.
Определение файлов XML
Прежде всего, зайдите в свою папку и создайте 4 разных формы:
-
shape_top
<gradient android:startColor="#ffffff" android:endColor="#ffffff" android:angle="270"/> <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"/> -
shape_normal
<gradient android:startColor="#ffffff" android:endColor="#ffffff" android:angle="270"/> <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"/> -
shape_bottom
<gradient android:startColor="#ffffff" android:endColor="#ffffff" android:angle="270"/> <corners android:bottomRightRadius="10dp" android:bottomRightRadius="10dp"/> -
shape_rounded
<gradient android:startColor="#ffffff" android:endColor="#ffffff" android:angle="270"/> <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" android:bottomRightRadius="10dp" android:bottomRightRadius="10dp"/>
Теперь создайте другой макет строки для каждой фигуры, т.е. для shape_top:
-
Вы также можете сделать это с программным изменением фона.
<TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginLeft="20dp" android:layout_marginRight="10dp" android:fontFamily="sans-serif-light" android:text="TextView" android:textSize="22dp" /> <TextView android:id="@+id/txtValue1" android:layout_width="match_parent" android:layout_height="48dp" android:textSize="22dp" android:layout_gravity="right|center" android:gravity="center|right" android:layout_marginLeft="20dp" android:layout_marginRight="35dp" android:text="Fix" android:scaleType="fitEnd" />
И определите селектор для каждого форматированного списка, то есть для shape_top:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Selected Item -->
<item android:state_selected="true"
android:drawable="@drawable/shape_top" />
<item android:state_activated="true"
android:drawable="@drawable/shape_top" />
<!-- Default Item -->
<item android:state_selected="false"
android:drawable="@android:color/transparent" />
</selector>
Измените свой CustomAdapter
Наконец, определите параметры макета внутри CustomAdapter:
if(position==0)
{
convertView = mInflater.inflate(R.layout.list_layout_top, null);
}
else
{
convertView = mInflater.inflate(R.layout.list_layout_normal, null);
}
if(position==getCount()-1)
{
convertView = mInflater.inflate(R.layout.list_layout_bottom, null);
}
if(getCount()==1)
{
convertView = mInflater.inflate(R.layout.list_layout_unique, null);
}
И это сделано!
Ответ 10
Я использую настраиваемое представление, которое я компоную поверх других, и просто рисую 4 маленьких угла в том же цвете, что и фон. Это работает независимо от содержимого представления и не выделяет много памяти.
public class RoundedCornersView extends View {
private float mRadius;
private int mColor = Color.WHITE;
private Paint mPaint;
private Path mPath;
public RoundedCornersView(Context context) {
super(context);
init();
}
public RoundedCornersView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
TypedArray a = context.getTheme().obtainStyledAttributes(
attrs,
R.styleable.RoundedCornersView,
0, 0);
try {
setRadius(a.getDimension(R.styleable.RoundedCornersView_radius, 0));
setColor(a.getColor(R.styleable.RoundedCornersView_cornersColor, Color.WHITE));
} finally {
a.recycle();
}
}
private void init() {
setColor(mColor);
setRadius(mRadius);
}
private void setColor(int color) {
mColor = color;
mPaint = new Paint();
mPaint.setColor(mColor);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setAntiAlias(true);
invalidate();
}
private void setRadius(float radius) {
mRadius = radius;
RectF r = new RectF(0, 0, 2 * mRadius, 2 * mRadius);
mPath = new Path();
mPath.moveTo(0,0);
mPath.lineTo(0, mRadius);
mPath.arcTo(r, 180, 90);
mPath.lineTo(0,0);
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
/*Paint paint = new Paint();
paint.setColor(Color.RED);
canvas.drawRect(0, 0, mRadius, mRadius, paint);*/
int w = getWidth();
int h = getHeight();
canvas.drawPath(mPath, mPaint);
canvas.save();
canvas.translate(w, 0);
canvas.rotate(90);
canvas.drawPath(mPath, mPaint);
canvas.restore();
canvas.save();
canvas.translate(w, h);
canvas.rotate(180);
canvas.drawPath(mPath, mPaint);
canvas.restore();
canvas.translate(0, h);
canvas.rotate(270);
canvas.drawPath(mPath, mPaint);
}
}