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>