繁体   English   中英

CardView内的圆角底部TextView

[英]Rounded Corner Bottom TextView inside CardView

我使用CardView显示列表项,其中每个列表项包含两个文本视图,即 - 现在预订/预订和详细信息/详细信息。

我想实现圆形底部TextView,但得到矩形形状

在此输入图像描述

我必须设计这样的东西:

在此输入图像描述

这是我的XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="true"
        android:layout_margin="5dp"
        app:cardCornerRadius="5dp"
        app:cardElevation="2dp">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:layout_weight="1">

                .......

            <LinearLayout
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:orientation="horizontal"
                android:layout_marginTop="5dp"
                android:background="@color/more"
                android:layout_weight="1">

                <TextView
                    android:id="@+id/btnBook"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"
                    android:text="BOOK"
                    android:textColor="@android:color/background_light"
                    android:padding="5dp"
                    android:background="@null"
                    android:textAppearance="?android:textAppearanceMedium"
                    android:gravity="center" />

                <TextView
                    android:id="@+id/btnDetail"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"
                    android:text="DETAILS"
                    android:background="@null"
                    android:textColor="@android:color/background_light"
                    android:padding="10dp"
                    android:textAppearance="?android:textAppearanceMedium"
                    android:gravity="center" />

            </LinearLayout>

        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

在哪里我必须做出改变才能完成它?

您必须在drawable文件夹中为此选择器。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
      <shape 
        android:shape="rectangle">
            <stroke android:width="2dp" android:color="@color/more" />
            <dotted android:color="#00FF0000" />
            <padding android:bottom="1dp"/>
        </shape>
   </item>
</layer-list>

然后将背景设置为您的视图。 用这个

android:background="@drawable/corner_selector"

代替

android:background="@color/more"

在drawable文件夹中创建一个文件rounded_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >         
<stroke
      android:width="1dp"
      android:color="@color/common_border_color" />

<solid android:color="#fff" />

<padding
       android:left="1dp"
       android:right="1dp"
       android:top="1dp" />

<corners android:radius="5dp" />
</shape>

并将其作为线性布局的背景

<LinearLayout
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:layout_marginTop="5dp"
            android:background="@drawable/rounded_border"
            android:layout_weight="1">

将此背景设置为包含textViewsLinearLayout

<item>    
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
            <corners android:bottomLeftRadius="cardview_corner_radius_value"
                android:bottomRightRadius="cardview_corner_radius_value" />
        </shape>
    </item>

并将TextView background添加为透明

     1. make button.xml file and put it in drawable folder
     <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item android:state_pressed="true" >
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#5e7974" />
             <gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92"  />            
         </shape>
     </item>
    <item android:state_focused="true">
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#5e7974" />
             <solid android:color="#58857e"/>       
         </shape>
     </item>  
    <item >
        <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#5e7974" />
             <gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />            
         </shape>
     </item>
    </selector>
2. then change your xml background of Linearlayout 
 android:background="@color/more"
to 
android:background="@drawable/button"

尝试用这种最简单的方法来完成布局 这是图片

 <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

<Button 
    android:id="@+id/btn"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/btnbackground"
    android:layout_margin="20dp"
    android:text="My Profile"
    />

 </LinearLayout>

之后在可绘制文件夹btnbackground.xml中创建一个xml

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

<item android:drawable="@drawable/llabeforeclick3" 
    android:state_pressed="true"/>
<item android:drawable="@drawable/llaafterclick3"/>

</selector>

然后在drawable目录中创建另一个llabeforeclick3.xml

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle" >

    <solid android:color="#19384A" >
    </solid>

     <corners
     android:bottomLeftRadius="10dp"
     android:bottomRightRadius="10dp"
     android:topRightRadius="10dp"
     android:topLeftRadius="10dp" /> 

 <stroke
    android:width="0dp"
    android:color="#19384A" /> 

<padding
    android:left="4dp"
    android:top="4dp"
    android:right="4dp"
    android:bottom="4dp"
    android:color="#19384A" />     
</shape>

之后在drawable中创建另一个xml llaafterclick3.xml

 <shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle" >
     //background color

    <solid android:color="#204A60" >
    </solid>

  <corners
     android:bottomLeftRadius="10dp"
     android:bottomRightRadius="10dp"
     android:topRightRadius="10dp"
     android:topLeftRadius="10dp" />
        //before clicked

  <gradient
     android:angle="45"
     android:centerColor="#204A60"
     android:centerX="20"
     android:centerY="20"
     android:endColor="#204A60"
     android:gradientRadius="25"
     android:startColor="#204A60" />

</shape>

如果一些伙伴想要制作更圆润的角落,那就用来增加尺寸

     android:bottomLeftRadius="10dp"
     android:bottomRightRadius="10dp"
     android:topRightRadius="10dp"
     android:topLeftRadius="10dp"

在这里解决你的颜色代码取决于你需要只使用颜色代码和radious。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM