码迷,mamicode.com
首页 > 移动开发 > 详细

Android之CardView

时间:2015-12-18 16:45:00      阅读:588      评论:0      收藏:0      [点我收藏+]

标签:

  在Android5.0之后为我们新增了一个新的控件CardView,CardView是一个卡片布局,布局可以包含圆角和阴影,本质上CardView是一个FrameLayout,因此它作为一个布局容器,可以布局其他的View。

  CardView中常用的属性有:

1、  cardElevation:设置阴影的大小

2、  cardBackgroundColor:卡片布局的背景演示

3、  cardCornerRadius:卡片布局的圆角的大小

4、  conentPadding:卡片布局和内容之间的距离

  先上案例内容,具体无下图所示:

技术分享

具体使用步骤如下:

第一步添加支持库,具体看参照下图:

技术分享

第二步,编写布局文件,布局文件具体内容如下:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.jredu.blog.CardViewActivity">

    <TextView
        android:id="@+id/radius_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:text="Radius"
        android:textColor="@android:color/black" />

    <SeekBar
        android:id="@+id/corner_radius_seek_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:max="100" />

    <TextView
        android:id="@+id/elevation_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:text="Elevation"
        android:textColor="@android:color/black" />

    <SeekBar
        android:id="@+id/elevation_seek_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:max="50" />

    <TextView
        android:id="@+id/alpha_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:text="Alpha"
        android:textColor="@android:color/black" />

    <SeekBar
        android:id="@+id/alpha_seek_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255" />

    <TextView
        android:id="@+id/color_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:text="Background"
        android:textColor="@android:color/black" />

    <RadioGroup
        android:id="@+id/select_bg_color_radio"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/def"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/cardview_light_background"
            android:checked="true" />

        <RadioButton
            android:id="@+id/red"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/card_red" />

        <RadioButton
            android:id="@+id/blue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/card_blue" />
    </RadioGroup>

    <android.support.v7.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="8dp"
        android:clickable="true"
        android:foreground="?android:selectableItemBackground"
        app:cardElevation="10dp"
        app:contentPadding="10dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/face"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@mipmap/ic_launcher" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginLeft="15dp"
                android:layout_toRightOf="@id/face"
                android:gravity="center_vertical"
                android:orientation="vertical">

                <TextView

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="13611111111"
                    android:textColor="@android:color/black"
                    android:textSize="16sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="Mobile"
                    android:textColor="@android:color/black"
                    android:textSize="16sp" />
            </LinearLayout>

            <ImageView
                android:id="@+id/msg"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:src="@mipmap/ic_launcher" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>
    
</LinearLayout>

第三步,在Activity中编写实现逻辑

public class CardViewActivity extends AppCompatActivity {

    private CardView mCardView;
    private SeekBar mCornerRadiusSeekBar;
    private SeekBar mElevationSeekBar;
    private SeekBar mAlphaSeekBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_card_view);
        mCardView = (CardView)findViewById(R.id.cardView);

        mCornerRadiusSeekBar = (SeekBar) findViewById(R.id.corner_radius_seek_bar);
        mCornerRadiusSeekBar.setProgress((int) mCardView.getRadius());
        mCornerRadiusSeekBar.setOnSeekBarChangeListener(SeekBarChangeListener);

        mElevationSeekBar = (SeekBar) findViewById(R.id.elevation_seek_bar);
        mElevationSeekBar.setProgress((int) mCardView.getCardElevation());
        mElevationSeekBar.setOnSeekBarChangeListener(SeekBarChangeListener);

        mAlphaSeekBar = (SeekBar) findViewById(R.id.alpha_seek_bar);
        mAlphaSeekBar.setProgress((int) ViewCompat.getAlpha(mCardView) * 255);
        mAlphaSeekBar.setOnSeekBarChangeListener(SeekBarChangeListener);

        RadioGroup rb = (RadioGroup) findViewById(R.id.select_bg_color_radio);
        rb.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                //设置背景
                mCardView.setCardBackgroundColor(
                        getResources().getColor(getColorId(checkedId)));
            }
        });
    }

    private SeekBar.OnSeekBarChangeListener SeekBarChangeListener = new SeekBar.OnSeekBarChangeListener(){
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            //设置圆角
            if (mCornerRadiusSeekBar.getProgress() != mCardView.getRadius()) {
                mCardView.setRadius(mCornerRadiusSeekBar.getProgress());
            }
            //设置阴影
            if (mElevationSeekBar.getProgress() != mCardView.getCardElevation()) {
                mCardView.setCardElevation(mElevationSeekBar.getProgress());
            }
            //设置透明度
            ViewCompat.setAlpha(mCardView, mAlphaSeekBar.getProgress() / 255f);
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    };

    private int getColorId(int id) {
        switch (id) {

            case R.id.red:
                return R.color.card_red;
            case R.id.blue:
                return R.color.card_blue;

            default:
                return R.color.cardview_light_background;
        }
    }
}

 

作者:杰瑞教育
出处:http://www.cnblogs.com/jerehedu/ 
版权声明:本文版权归杰瑞教育技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
技术咨询:技术分享
 

Android之CardView

标签:

原文地址:http://www.cnblogs.com/jerehedu/p/5057120.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!