前言:
第一眼就爱上了Android的Material Design风格。以前倒对Android的界面风格不那么喜欢,扁平化的界面设计真是好看。
其实,这个嵌套操作在实现上并没有什么难点。可是,我还在Eclipse上没有试验成功。后来换到Android Studio上就OK了。以下是实现过程。
笔者开发环境:
系统:Windows 7 旗舰版
IDE:Android Studio v1.0
工具包:cardview-v7-21.0.0.aar
recyclerview-v7-21.0.0.aar
效果图展示:
关键代码:
主界面展示的MainActivity:
public class MainActivity extends FragmentActivity {
private int getLayoutResID() {
return R.layout.activity_main;
}
private RecyclerView mRecyclerView = null;
private String[] dataset = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(getLayoutResID());
initEvent();
}
private void initEvent() {
initViews();
initData();
setViews();
}
private void initViews() {
mRecyclerView = (RecyclerView) findViewById(R.id.activity_main_recyclerView);
}
private void initData() {
// 创建数据集
dataset = new String[100];
for (int i = 0; i < dataset.length; i++) {
dataset[i] = "item " + (i + 1);
}
}
private void setViews() {
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
mRecyclerView.setLayoutManager(layoutManager);
RecyclerViewAdapter adapter = new RecyclerViewAdapter(dataset);
mRecyclerView.setAdapter(adapter);
}
}
List的配置器RecyclerViewAdapter:
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
// 数据集
private String[] mDataset;
public RecyclerViewAdapter(String[] dataset) {
super();
mDataset = dataset;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
View view = View.inflate(viewGroup.getContext(), R.layout.recyclerview_item, null);
// 创建一个ViewHolder
ViewHolder holder = new ViewHolder(view);
holder.mTextView = (TextView) view.findViewById(R.id.activity_card_view_label_textview);
return holder;
}
@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
// 绑定数据到ViewHolder上
viewHolder.mTextView.setText(mDataset[i]);
}
@Override
public int getItemCount() {
return mDataset.length;
}
public static class ViewHolder extends RecyclerView.ViewHolder {
public TextView mTextView;
public ViewHolder(View itemView) {
super(itemView);
// mTextView = (TextView) itemView;
}
}
}
主界面布局文件activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/activity_main_recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:orientation="horizontal"
card_view:cardBackgroundColor="#ffFF8C00"
card_view:cardCornerRadius="4dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp" >
<ImageView
android:id="@+id/activity_card_view_imageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:src="@drawable/notre_dame_de_paris" />
<TextView
android:id="@+id/activity_card_view_label_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dip"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:textColor="@android:color/white"
android:textSize="24sp"
android:text="@string/show_label" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
注意事项:
1.如果可以请使用Android Studio来开发它,我也不知道为什么我的Eclipse在不报错的情况下,为什么运行不了。我也要再摸索一下,后期再补到文章中来。
2.在看到代码和程序运行的效果图来看,可能你会觉得这个跟一个普通的RelativeLayout有什么区别?不过,的确CardView是继承自FrameLayout,它们都是ViewGroup,即其他控件的容器。所以这一点也就不足为奇了。
3.虽然CardView与RelativeLayout都是ViewGroup,有很多类似的东西,也可以把CardView替换成RelativeLayout。不过,CardView还有一些比较优越的属性。elevation(CardView的Z轴阴影),cardBackgroundColor(CardView的卡片颜色)和cardConerRadius(CardView卡片的四角圆角矩形程度)。
4.elevation:在API21(Android L)等级以上才拥有此属性。只能通过xml中的elevation属性指定;
cardBackgroundColor:Android2.0以上有效,只能通过xml的cardBackgroundColor属性进行指定;
cardConerRadius:Android2.0以上有效,单位dimen(dp,px,sp),可以通过xml指定,也可以通过Java代码的setRadius指定。