Android'de köşeleri yuvarlatılmış bir ListView'ı nasıl oluştururum?

Android'de köşeleri yuvarlatılmış bir ListView'ı nasıl oluştururum?

İşte bunu yapmanın bir yolu (Android Belgeleri sayesinde!):

Aşağıdakileri bir dosyaya ekleyin (customshape.xml deyin) ve sonra (res / drawable / customshape.xml) içine yerleştirin

<?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> 

Bu dosyayı oluşturmayı tamamladıktan sonra, arka planı aşağıdaki yollardan biriyle ayarlayın:

Kod Üzerinden: listView.setBackgroundResource(R.drawable.customshape);

XML aracılığıyla , kapsayıcıya aşağıdaki özelliği eklemeniz yeterlidir (ör. LinearLayout veya herhangi bir alana):

android:background="@drawable/customshape"

Umarım birisi faydalı bulur ...

Bu işe yaramasına rağmen, tüm arka plan rengini de çıkardı. Sadece sınır yapmak ve sadece bu XML düzen kodunu bununla değiştirmek için bir yol arıyordum ve gitmek için iyi oldu!

<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> 

@ Kris-van-bael

Arka plan dikdörtgeninin seçimde göründüğü üst ve alt satır için seçim vurgulamasıyla ilgili sorun yaşayanlar için, liste görünümünüz için seçiciyi saydam renge ayarlamanız gerekir.

listView.setSelector(R.color.transparent);

Color.xml dosyasına aşağıdakileri eklemeniz yeterlidir -

<color name="transparent">#00000000</color>

Yazarlar sayesinde diğer cevaplar çok faydalı!

Ancak @alvins @bharat dojeha vurgulamasını devre dışı bırakmak yerine, bir öğeyi seçim sırasında vurgularken dikdörtgenin nasıl özelleştirileceğini göremedim.

Aşağıdakiler, aynı şekilden seçildiğinde anahatsız ve açık gri olmayan yuvarlak liste görünümü öğesi kabı oluşturmamda işe yarar:

Xml dosyanızın örneğin (res / drawable / customshape.xml dosyasında) gibi bir seçici içermesi gerekir:

<?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>

Ardından, özel seçiciyi arka plan olarak ayarlamak için bir liste bağdaştırıcısı uygulamanız ve getView yöntemini geçersiz kılmanız gerekir

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        //snip
        convertView.setBackgroundResource(R.drawable.customshape);
        //snip
    }

ve ayrıca varsayılan seçici dikdörtgeni `` onCreate '' de gizlemem gerekiyor (ayrıca öğeler arasındaki ince gri ayırıcı satırımı da gizliyorum):

listView.setSelector(android.R.color.transparent);
listview.setDivider(null);

Bu yaklaşım, yalnızca çeşitli seçim durumları olan ListViewItem için değil, çekilebilirler için genel bir çözümü çözmektedir.

Güncelleme

Bu günlerde çözüm CardViewyerleşik yuvarlatılmış köşeler için bir destek kullanmaktır .

Orijinal cevap *

Bulduğum başka bir yol, mizanpajın üstüne bir resim çizerek mizanpajınızı maskelemekti. Size yardımcı olabilir. Android XML yuvarlak kırpılmış köşelere göz atın

Seçim için başka bir çözüm, listedeki ilk ve son öğelerle ilgili sorunları vurgulamaktadır:

Liste arka planınızın üstüne ve altına yarıçapa eşit veya daha büyük dolgu ekleyin. Bu, seçim vurgulamanın köşe eğrilerinizle çakışmamasını sağlar.

Saydam olmayan seçim vurgulamasına ihtiyacınız olduğunda bu en kolay çözümdür.

<?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>

aslında, en iyi çözüm bu bağlantıda tarif düşünüyorum:

http://blog.synyx.de/2011/11/android-listview-with-rounded-corners/

kısacası, üst, orta ve alt öğeler için farklı bir arka plan kullanır, böylece üst ve alt olanlar yuvarlanır.

Bu benim için inanılmaz kullanışlıydı. Kendi köşelerinizi kullanıyorsanız, yuvarlatılmış köşeleri mükemmel bir şekilde vurgulamak için başka bir çözüm önermek istiyorum CustomAdapter.

XML Dosyalarını Tanımlama

Her şeyden önce, çekilebilir klasörünüzün içine girin ve 4 farklı şekil oluşturun:

• 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"/>

Şimdi, her şekil için farklı bir satır düzeni oluşturun, örneğin shape_top:

• Bunu, programlı olarak arka planı değiştirerek de yapabilirsiniz.

  <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" />

Ve her şekilli liste için bir seçici tanımlayın, örneğin 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'ınızı değiştirme

Son olarak, aşağıdakilerin içindeki düzen seçeneklerini tanımlayın 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);
}

Ve bu bitti!

u sınır yapmak için çekilebilir klasör katı ve köşeleri özelliği ile başka bir xml dosyası yapmak zorunda ve arka planda çağırır

Diğerlerinin üzerine yerleştirdiğim ve sadece 4 küçük köşeyi arka planla aynı renkte çizen özel bir görünüm kullanıyorum. Bu, görünüm içeriği ne olursa olsun çalışır ve fazla bellek ayırmaz.

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);
    }
}