Android 基础：Materia Design 定义视图阴影elevation和创建卡片CardView

下面通过官网的一个Sample来实例演示

====================

效果图

---

项目结构

---

代码

–

activity_card_view.xml:

<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" />

fragment_card_view:

<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>

CardViewActivity:

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();

    }

}

}

CardViewFragment:

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) {

            Log.d(TAG, String.format("SeekBar Radius progress : %d", progress));

            mCardView.setRadius(progress);

        }

        @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);