CardView和SeekBar使用

用SeekBar控制CardView的边角和景深

CardView继承FrameLayout，FrameLayout用于在屏幕部分区域去显示一个控件。CardView的elevation特性需要在API21以上才能使用。
1、新建activity_card_view.xml
activity_card_view.xml，CardViewActivity的布局文件
框架布局是最简单的布局形式，所有添加到这个布局中的文件都以层叠方式显示

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/container"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:paddingBottom="@dimen/activity_vertical_margin"    tools:context="com.example.android.cardview.CardViewActivity"    tools:ignore="MergeRootFrame" />

2、新建activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <LinearLayout style="@style/Widget.SampleMessageTile"                  android:layout_width="match_parent"                  android:layout_height="wrap_content"                  android:orientation="vertical">        <TextView style="@style/Widget.SampleMessage"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginLeft="@dimen/horizontal_page_margin"            android:layout_marginRight="@dimen/horizontal_page_margin"            android:layout_marginTop="@dimen/vertical_page_margin"            android:layout_marginBottom="@dimen/vertical_page_margin"            android:text="@string/intro_message" />    </LinearLayout></LinearLayout>

3、新建fragment_card_view.xml
fragment_card_view.xml碎片布局CardView和SeekBar
ScrollView滚动视图是指当拥有很多内容，屏幕显示不完时，需要通过滚动跳来显示的视图。ScrollView只支持垂直滚动。

<ScrollView    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:card_view="http://schemas.android.com/apk/res-auto"    android:layout_height="match_parent"    android:layout_width="match_parent"    >    <LinearLayout android:layout_width="match_parent"                  android:layout_height="match_parent"                  android:orientation="vertical"                  android:paddingBottom="@dimen/activity_vertical_margin"                  android:paddingTop="@dimen/activity_vertical_margin"                  android:paddingLeft="@dimen/activity_horizontal_margin"                  android:paddingRight="@dimen/activity_horizontal_margin"        >        <android.support.v7.widget.CardView            android:id="@+id/cardview"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:elevation="100dp"            card_view:cardBackgroundColor="@color/cardview_initial_background"            card_view:cardCornerRadius="8dp"            android:layout_marginLeft="@dimen/margin_large"            android:layout_marginRight="@dimen/margin_large"            >            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_margin="@dimen/margin_medium"                android:text="@string/cardview_contents"                />        </android.support.v7.widget.CardView>        <LinearLayout            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:layout_marginTop="@dimen/margin_large"            android:orientation="horizontal"            >            <TextView                android:layout_width="@dimen/seekbar_label_length"                android:layout_height="wrap_content"                android:layout_gravity="center_vertical"                android:text="@string/cardview_radius_seekbar_text"                />            <SeekBar                android:id="@+id/cardview_radius_seekbar"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_margin="@dimen/margin_medium"                />        </LinearLayout>        <LinearLayout            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:orientation="horizontal"            >            <TextView                android:layout_width="@dimen/seekbar_label_length"                android:layout_height="wrap_content"                android:layout_gravity="center_vertical"                android:text="@string/cardview_elevation_seekbar_text"                />            <SeekBar                android:id="@+id/cardview_elevation_seekbar"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_margin="@dimen/margin_medium"                />        </LinearLayout>    </LinearLayout></ScrollView>

4、建立CardViewActivity，使用FragmentManager与碎片CardViewFragment关联

public class CardViewActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_card_view);        if (savedInstanceState == null) {            getFragmentManager().beginTransaction()                    .add(R.id.container, CardViewFragment.newInstance())                    .commit();        }    }}

5、建立CardViewFragment,实例化CardView和SeekBar，使用setOnSeekBarChangeListener()监听SeekBar变化，setRadius()和setElevation()分别改变CardView的边角弧度和立体深度。

/** Copyright 2014 The Android Open Source Project** Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at**     http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/package com.example.android.cardview;import android.app.Fragment;import android.os.Bundle;import android.support.v7.widget.CardView;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.SeekBar;/** * Fragment that demonstrates how to use CardView. */public class CardViewFragment extends Fragment {    private static final String TAG = CardViewFragment.class.getSimpleName();    /** The CardView widget. */    //@VisibleForTesting    CardView mCardView;    /**     * SeekBar that changes the cornerRadius attribute for the {@link #mCardView} widget.     */    //@VisibleForTesting    SeekBar mRadiusSeekBar;    /**     * SeekBar that changes the Elevation attribute for the {@link #mCardView} widget.     */    //@VisibleForTesting    SeekBar mElevationSeekBar;    /**     * Use this factory method to create a new instance of     * this fragment using the provided parameters.     *     * @return A new instance of fragment NotificationFragment.     */    public static CardViewFragment newInstance() {        CardViewFragment fragment = new CardViewFragment();        fragment.setRetainInstance(true);//控制碎片实例能否改变配置        return fragment;    }    public CardViewFragment() {        // Required empty public constructor    }    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        // Inflate the layout for this fragment        return inflater.inflate(R.layout.fragment_card_view, container, false);    }    @Override    public void onViewCreated(View view, Bundle savedInstanceState) {        super.onViewCreated(view, savedInstanceState);        mCardView = (CardView) view.findViewById(R.id.cardview);        mRadiusSeekBar = (SeekBar) view.findViewById(R.id.cardview_radius_seekbar);        mRadiusSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {            @Override            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {//progress值默认0-100，可用setMax(int)设定最大值                Log.d(TAG, String.format("SeekBar Radius progress : %d", progress));                mRadiusSeekBar.setMax(200);                mCardView.setRadius(progress);//更新cardview的边角弧度            }            @Override            public void onStartTrackingTouch(SeekBar seekBar) {                //Do nothing            }            @Override            public void onStopTrackingTouch(SeekBar seekBar) {                //Do nothing            }        });        mElevationSeekBar = (SeekBar) view.findViewById(R.id.cardview_elevation_seekbar);        mElevationSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {            @Override            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {                Log.d(TAG, String.format("SeekBar Elevation progress : %d", progress));                mCardView.setElevation(progress);            }            @Override            public void onStartTrackingTouch(SeekBar seekBar) {                //Do nothing            }            @Override            public void onStopTrackingTouch(SeekBar seekBar) {                //Do nothing            }        });    }}

6、AndroidManifest.xml声明权限和配置定义文件。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.example.android.cardview"    android:versionCode="1"    android:versionName="1.0" >    <uses-sdk android:minSdkVersion="7"              android:targetSdkVersion="21" />    <application        android:allowBackup="true"        android:icon="@drawable/ic_launcher"        android:label="@string/app_name"        android:theme="@style/AppTheme" >        <activity            android:name=".CardViewActivity"            android:label="@string/app_name" >            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>