IT TIP

컬러 배경 및 파급 효과가있는 ListView 선택기

itqueen 2021. 1. 5. 20:48
반응형

컬러 배경 및 파급 효과가있는 ListView 선택기


ListViewAndroid L 개발자 미리보기의 표준 선택기는 colorControlHighlight터치에 대한 파급 효과를 사용 하며 초점이 맞지 않은 상태에서 투명한 배경이 있습니다.

ListView배경색이 있지만 동일한 하이라이트 색상으로 터치시 잔물결 효과가 여전히 나타나는 항목 을 정의하고 싶습니다 . 이제 다음 드로어 블을 정의하면 :

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:colorControlHighlight">
    <item android:drawable="@color/my_background_color"/>
</ripple>

작동하지만 잔물결 ListView은 터치 위치에 관계없이 항목 중간에서 시작됩니다 . ListView예를 들어, 외부에서 동일한 배경을 사용하면 LinearLayout예상대로 작동합니다 (잔물결이 터치 위치에서 시작됨).


파급 효과를 유지하면서 개별적으로 색상이 지정된 목록 항목을 얻을 수있었습니다. 가지고있는 어댑터를 사용하여 목록 항목의 배경을 설정하고 맨 위에 선택기를 표시하도록 목록보기를 설정합니다.

<ListView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:drawSelectorOnTop="true" />

이렇게하면 배경 위에 잔물결 효과가 나타납니다.


내가 알 수있는 한이 버그는 5.1이 아닌 Android 5.0에만 있습니다. 트릭은 Drawable # setHotspot을 여기 https://twitter.com/crafty/status/561768446149410816에 대한 Google 개발자 힌트로 사용하는 것 같습니다 (모호한 트위터 힌트는 훌륭한 문서 형식이기 때문입니다!)

다음과 같은 행 레이아웃이 있다고 가정합니다.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

      <LinearLayout
            android:id="@+id/row_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:background="?attr/selectableItemBackground">

          .... content here .....

     </LinearLayout>

</FrameLayout>

다음은 나를 위해 일했습니다.

            row.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    v.findViewById(R.id.row_content)
                        .getBackground()
                        .setHotspot(event.getX(), event.getY());

                    return(false);
                }
            });

목록 항목 의 루트 요소배경을 적용하는 경우에만 제대로 작동하는 것 같습니다 .

또한 ListView 대신 새로운 RecyclerView 사용을 고려하십시오.

목록 항목보기 예 :

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/list_padding"
    android:layout_marginLeft="@dimen/list_padding"
    android:layout_marginRight="@dimen/list_padding"
    android:padding="@dimen/list_padding"
    android:background="@drawable/ripple_bg">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Large Text"
        android:id="@+id/tvTitle"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Small Text"
        android:id="@+id/tvSubtitle" />

</RelativeLayout>

나는 @ArhatBaid의 답변을 조금 수정하고 테스트했으며 완벽하게 작동합니다.

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:drawable="@color/light_grey_header_navigation_drawer"/>
</ripple>

따라서 배경색을 설정하고 여전히 잔물결 효과를 가질 수 있습니다.
나를 위해 target과 minSdk는 21입니다.


상위 레이아웃의 배경으로 잔물결 효과를 포함하는 샘플 레이아웃입니다.

<RelativeLayout 
                android:id="@+id/id4"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/ripple_effect"
                android:clickable="true">

                <ImageView 
                    android:id="@+id/id3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:background="@drawable/image"
                    android:layout_centerVertical="true"/>

                <LinearLayout
                    android:id="@+id/id2" 
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true">

                    <TextView 
                        android:id="@+id/id1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/text"/>

                </LinearLayout>
            </RelativeLayout>

Ripple_effect.xml 여기에서 원하는 색상을 사용할 수 있습니다. sdk 버전 21을 사용하고 drawable-v21 및 style-v21 폴더가 있는지 확인하고 v21과 관련된 모든 파일을 그 안에 넣으십시오.

<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
                  android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>

여기서는 타원형 대신 직사각형과 같은 다른 모양을 사용할 수 있습니다.


You can achieve this with a nested Layout. Just create e.g. a LinearLayout as root layout around your existing layout, set the ripple effect on the root layout and your background color to the nested one.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/ripple_effect"
    android:orientation="vertical">

    <RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/containterContent"
        android:background="@color/yourCOLOR"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Your content -->

    </RelativeLayout>
</LinearLayout>

ReferenceURL : https://stackoverflow.com/questions/25443496/listview-selector-with-colored-background-and-ripple-effect

반응형