CardView 内的圆角底部 TextView
Rounded Corner Bottom TextView inside CardView
我正在使用 CardView 来显示列表项，其中每个列表项都包含两个文本视图，即 - BOOK NOW/BOOK 和 DETAIL/DETAILS。
我想实现底部圆角的 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>
我必须在哪里进行更改才能完成？
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"?>
<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"
在可绘制文件夹
中创建一个文件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">
将此背景设置为包含 textViews
的 LinearLayout
<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 添加为透明
尝试用这种最简单的方法来完成您的布局
<?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>
然后在 drawable 文件夹 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>
然后在可绘制目录
中再制作一个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。
我正在使用 CardView 来显示列表项，其中每个列表项都包含两个文本视图，即 - BOOK NOW/BOOK 和 DETAIL/DETAILS。
我想实现底部圆角的 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>
我必须在哪里进行更改才能完成？
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"?>
<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"
在可绘制文件夹
中创建一个文件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">
将此背景设置为包含 textViews
LinearLayout
<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 添加为透明
尝试用这种最简单的方法来完成您的布局
<?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>
然后在 drawable 文件夹 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>
然后在可绘制目录
中再制作一个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。