Android에서 모서리가 둥근 ListView를 어떻게 만듭니 까?


답변:


371

한 가지 방법이 있습니다 (Android 설명서 덕분에!).

다음을 파일 (customshape.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
좋은 팁 주셔서 감사합니다. 참고로, 복사-붙여 넣기 만하면 "XmlPullParserException : 이진 XML 파일 행 # 4 <gradient> 태그에 'angle'특성이 45의 배수 여야 함"이라는 런타임 예외가 발생했습니다. 각도를 270으로 변경하면 쉽게 해결됩니다.
allclaws

수정 해 주셔서 감사합니다 ... 그러나 왜 그런 일이 발생할 수 있는지 모르겠습니다. 구체적인 이유가 있습니까?
Legend

@teedyay : 언제 어디서나 친구 :)
전설

1
allclaws와 마찬가지로 각도는 45의 배수 여야합니다. "XmlPullParserException : 이진 XML 파일 행 # 4 <gradient> 태그에는 'angle'특성이 45의 배수 여야합니다"
Youssef

29
선택 강조 표시에서는 잘 작동하지 않습니다. 상단 또는 하단 항목을 선택하면 배경색이 사각형이며 둥근 배경 위에 그려집니다.
Kris Van Bael

56

그것이 효과가 있었지만 전체 배경색도 제거했습니다. 테두리를 만드는 방법을 찾고 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> 


12

@ 크리스 반 바엘

선택시 배경 사각형이 표시되는 상단 및 하단 행의 선택 강조 표시에 문제가있는 경우 목록보기의 선택기를 투명 색상으로 설정해야합니다.

listView.setSelector(R.color.transparent);

color.xml에서 다음을 추가하십시오.

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

5
그것은 나를 위해 작동하지 않았다. 그러나 다음 줄을 추가하여 제거했습니다.android:cacheColorHint="@android:color/transparent"
cesar

1
이것은 분명히 선택 문제를 해결했습니다. 감사합니다! 자신 만의 선택기 대신 선택기 색상에 android.R.color.transparent를 사용할 수도 있습니다.
greg7gkb

3
프로그래밍 방식으로 수행하는 대신 이것을 XML 레이아웃의 ListView에 추가하여 선택 색상을 숨기십시오. android : listSelector = "# 00000000"
Elad Nava

@alvins 목록보기 항목과 같이 강조 표시하기 위해 레이아웃을 선택할 수있는 방법이 있습니까?
Bharat Dodeja

listSelector에 불투명 한 색상을 사용하려면 어떻게해야합니까?
suitianshi

3

다른 답변은 저자 덕분에 매우 유용합니다!

그러나 강조 표시 @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);

이 방법은 다양한 선택 상태를 가진 ListViewItem뿐만 아니라 드로어 블에 대한 일반적인 솔루션을 해결합니다.



2

선택에 대한 또 다른 솔루션은 목록의 첫 번째 항목과 마지막 항목의 문제를 강조합니다.

목록 배경의 상단과 하단에 반지름 이상으로 패딩을 추가합니다. 이렇게하면 선택 강조 표시가 모서리 곡선과 겹치지 않습니다.

투명하지 않은 선택 강조 표시가 필요한 경우 가장 쉬운 솔루션입니다.

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


1

이것은 나에게 매우 편리했다. 자신만을 사용하는 경우 둥근 모서리를 완벽하게 강조 표시하는 또 다른 해결 방법을 제안하고 싶습니다.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);
}

그리고 완료되었습니다!


1

테두리 u를 만들려면 drawable 폴더의 solid 및 corner 속성을 가진 다른 xml 파일을 만들고 백그라운드에서 호출해야합니다.


0

다른 뷰 위에 레이아웃을 지정하고 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);
    }
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.