文章目录
CardView的使用配置build.grade编写布局文件CardView的属性
CardView的使用
配置build.grade
只要在build.grade文件中加入以下代码以自动导入support-v7包。在重新build一下工程。
dependencies
{
implementation
fileTree(dir
: 'libs', include
: ['*.jar'])
implementation
'com.android.support:appcompat-v7:27.1.1'
implementation
'com.android.support:cardview-v7:27.1.1'
...
}
编写布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.v7.widget.CardView
android:id="@+id/tv_item"
android:layout_width="match_parent"
android:layout_height="250dp"
card_view:cardCornerRadius="20dp"
card_view:cardBackgroundColor="#22FF00CC"
card_view:cardElevation="20dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/ic_launcher_foreground"
android:scaleType="centerInside"/>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_marginTop="30dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<SeekBar
android:id="@+id/sb_1"
android:layout_width="200dp"
android:layout_height="wrap_content" />
<TextView
android:text="控制圆角的大小"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_marginTop="30dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<SeekBar
android:id="@+id/sb_2"
android:layout_width="200dp"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="控制阴影大小"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<SeekBar
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="@+id/sb_3"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="控制图片间距"/>
</LinearLayout>
</LinearLayout>
这里有两个CardView的重要属性：card_view:cardCornerRadius，设置圆角的半径；card_view:cardElevation，设置阴影的半径。 接下来下java文件中写上
public class MainActivity extends AppCompatActivity {
private SeekBar sb1
,sb2
,sb3
;
private CardView mCardView
;
@Override
protected void onCreate(Bundle savedInstanceState
) {
super.onCreate(savedInstanceState
);
setContentView(R
.layout
.activity_main
);
assignViews();
}
private void assignViews() {
mCardView
=findViewById(R
.id
.tv_item
);
sb1
=findViewById(R
.id
.sb_1
);
sb2
=findViewById(R
.id
.sb_2
);
sb3
=findViewById(R
.id
.sb_3
);
sb1
.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar
, int progress
, boolean fromUser
) {
mCardView
.setRadius(progress
);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar
) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar
) {
}
});
sb2
.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar
, int progress
, boolean fromUser
) {
mCardView
.setCardElevation(progress
);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar
) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar
) {
}
});
sb3
.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar
, int progress
, boolean fromUser
) {
mCardView
.setContentPadding(progress
,progress
,progress
,progress
);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar
) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar
) {
}
});
}
}
上述代码中设置了3个seekBar分别来设置CardView:mCardView.setRadius()设置圆角的半径，mCardView.setCardElevation()设置阴影的半径，mCardView.setContentPadding()设置CardView中
CardView的属性
card_view:cardElevation 阴影的大小
card_view:cardMaxElevation 阴影最大高度
card_view:cardBackgroundColor 卡片的背景色
card_view:cardCornerRadius 卡片的圆角大小
card_view:contentPadding 卡片内容于边距的间隔
card_view:contentPaddingBottom
card_view:contentPaddingTop
card_view:contentPaddingLeft
card_view:contentPaddingRight
card_view:contentPaddingStart
card_view:contentPaddingEnd
card_view:cardUseCompatPadding 设置内边距，V21+的版本和之前的版本仍旧具有一样的计算方式
card_view:cardPreventConrerOverlap 在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠
