UFO ET IT

배경으로 드로어 블 모양, 하단에 선

ufoet 2020. 12. 13. 10:02
반응형

배경으로 드로어 블 모양, 하단에 선


드로어 블을 TextView의 배경으로 사용하여 텍스트 아래에 구분선이 있습니다. 이 drawable-xml로 달성했습니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape 
        android:shape="rectangle">
            <solid android:color="#FFDDDDDD" />
            <gradient 
                android:angle="0"
                android:startColor="#FFAAAAAA"
                android:endColor="#FFEEEEEE"
                />
        </shape>
    </item>

    <item android:bottom="2dp">
        <shape 
        android:shape="rectangle">
            <solid android:color="#FF000000" />
        </shape>
    </item>

</layer-list>

그러나이 방법은 검은 색 사각형 위에 색이있는 사각형을 그립니다. 검은 색이 투명하지 않기 때문에 검은 색 사각형이없는 모양의 맨 아래에 선만 표시하고 싶습니다. 어떻게 할 수 있습니까?


일반적으로 절대적으로 필요한 경우가 아니면 배경을 최대한 적게 사용하려고합니다. 그렇게하면 초점, 눌림 등의 상태가있는 기본 배경색이 재정의되기 때문입니다. 추가보기 (수직 LinearLayout에서)를 사용하는 것이 좋습니다. 필요한만큼 두껍습니다. 예를 들면 :

 <View 
       android:background="#FF000000" 
       android:layout_height="2dp" 
       android:layout_width="fill_parent"/>

이것이 내가 바닥에 내 줄을 얻은 방법입니다. 획을 그린 다음 항목을 위쪽과 측면으로 이동하여 위쪽과 측면이 획을 표시하지 않도록합니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-8dp" android:left="-8dp" android:right="-8dp">
        <shape> 
            <solid android:color="#2b7996"/>
            <stroke android:color="#33b5e5" android:width="6dp"/>
        </shape>
    </item>
</layer-list>

더 나은 해결책이라고 생각합니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:gravity="bottom">
        <shape>
            <size android:height="1dp" />
            <solid android:color="#000000" />
        </shape>
    </item>
</layer-list>

일반적으로 비슷한 작업을 위해 다음과 같이 레이어 목록 드로어 블을 만들었습니다.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@color/underlineColor"/>
    </shape>
</item>
<item android:bottom="3dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/buttonColor"/>
    </shape>
</item>

아이디어는 먼저 underlineColor로 사각형을 그린 다음이 사각형 위에 실제 buttonColor로 다른 사각형을 그리지 만 bottomPadding을 적용하는 것입니다. 항상 작동합니다.

하지만 buttonColor를 투명하게해야했을 때 위의 드로어 블을 사용할 수 없었습니다. 해결책을 하나 더 찾았습니다

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
    </shape>
</item>

<item android:drawable="@drawable/white_box" android:gravity="bottom" android:height="2dp"/>
</layer-list>

(여기에서 볼 수 있듯이 mainButtonColor는 투명하고 white_box는 흰색 단색으로 그릴 수있는 단순한 직사각형입니다)


이 솔루션을 사용하면 다른 라인이 필요할 때마다 할 수 있습니다. 내 요구 사항은 밑줄뿐이었습니다. 레이아웃에 다른 색상을 지정할 수도 있습니다. 아래 그림에서 볼 수 있습니다.여기에 이미지 설명 입력

    <?xml version="1.0" encoding="UTF-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
        <shape>
            <solid android:color="@android:color/transparent"/>
            <stroke android:color="@color/white" android:width="5dp"/>
        </shape>
    </item>

    <item android:top="-5dp" android:bottom="-5dp" android:right="-5dp">
        <shape>
            <solid android:color="@android:color/transparent"/>
            <stroke android:color="@color/colorPrimaryDark" android:width="5dp"/>
        </shape>
    </item>

    <item android:bottom="-5dp" android:left="-5dp" android:right="-5dp">
        <shape>
            <solid android:color="@android:color/transparent"/>
            <stroke android:color="@color/colorPrimaryDark" android:width="5dp"/>
        </shape>
    </item>

    <item android:top="-5dp" android:left="-5dp" android:bottom="-5dp">
        <shape>
            <solid android:color="@android:color/transparent"/>
            <stroke android:color="@color/colorPrimaryDark" android:width="5dp"/>
        </shape>
    </item>

    <item android:bottom="2dp" android:left="5dp" android:right="5dp" android:top="5dp">
        <shape>
            <solid android:color="@color/colorPrimary"/>

            <corners android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="0dp" />
        </shape>
    </item>
</layer-list>

간단한 해결책은 TextView를 확장 한 다음 onDraw를 재정의하는 것입니다.

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Paint paint = new Paint();
    paint.setColor(ContextCompat.getColor(getContext(),R.color.colorTextUnderLine));
    paint.setStrokeWidth(10);
    canvas.drawLine(0.0f,canvas.getHeight(),canvas.getWidth(),canvas.getHeight(),
            paint);
}

참고 URL : https://stackoverflow.com/questions/9915793/shape-drawable-as-background-a-line-at-the-bottom

반응형