Android开发学习之卡片式布局的简单实现
GoogleNow是Android4.1全新推出的一款应用，它可以全面了解你的使用习惯，并为你提供现在或者未来可能用到的各种信息，GoogleNow提供的信息关联度较高，几乎是瞬间返回答案，总而言之，GoogleNow是Google提出的全新搜索概念。当然，GoogleNow最为引人注目的当属它的卡片式设计。我们首先来看几张GoogleNow的图片：
我们可以看出，这种卡片式的界面设计更为简洁，可以将用户需要的信息直接地呈现在用户面前，简洁而不失美观。那么现在我们就来一起做一个这样的卡片式界面吧！
首先我们先来建立一个布局：
<?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="wrap_content"
android:orientation="vertical"
android:background="@drawable/radius_bg"
android:padding="15dp">
<TextView
android:id="@+id/Card_Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textIsSelectable="true"/>
<ImageView
android:id="@+id/Card_Pic"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="@string/Description"
android:scaleType="center" />
</LinearLayout> 通过这个布局我们将完成一个圆角卡片的设计，其中圆角的实现是定义了一个Shape，具体代码如下：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners android:radius="8dp"/>
<solid android:color="#ffffff"/>
</shape> 下面我们定义一个GoogleCard的类：
package com.Android.GoogleCard;
public class GoogleCard
{
private String mDescription;
private int mDrawable;
public GoogleCard(String mDescription,int mDrawable)
{
this.mDescription=mDescription;
this.mDrawable=mDrawable;
}
public String getDescription()
{
return mDescription;
}
public void setDescription(String mDescription)
{
this.mDescription = mDescription;
}
public int getDrawable()
{
return mDrawable;
}
public void setDrawable(int mDrawable)
{
this.mDrawable = mDrawable;
}
}
接下里我们定义一个适配器类GoogleCardAdapter
package com.Android.GoogleCard;
import java.util.List;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
public class GoogleCardAdapter extends BaseAdapter
{
private List<GoogleCard> mCards;
private Context mContext;
public GoogleCardAdapter(Context mContext,List<GoogleCard> mCards)
{
this.mContext=mContext;
this.mCards=mCards;
}
@Override
public int getCount()
{
return mCards.size();
}
@Override
public Object getItem(int Index)
{
return mCards.get(Index);
}
@Override
public long getItemId(int Index)
{
return Index;
}
@Override
public View getView(int Index, View mView, ViewGroup mParent)
{
ViewHolder mHolder=new ViewHolder();
mView=LayoutInflater.from(mContext).inflate(R.layout.layout_item, null);
mHolder.Card_Title=(TextView)mView.findViewById(R.id.Card_Title);
mHolder.Card_Title.setText(mCards.get(Index).getDescription());
mHolder.Card_Pic=(ImageView)mView.findViewById(R.id.Card_Pic);
//记住啊，这里是setImageResource()方法，不是setBackgroundResource(),否则图像会变形啊
mHolder.Card_Pic.setImageResource(mCards.get(Index).getDrawable());
return mView;
}
private static class ViewHolder
{
TextView Card_Title;
ImageView Card_Pic;
}
}
最后我们来看主界面的布局和主要代码：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<ListView
android:id="@+id/ListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@null"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:dividerHeight="15dp"
android:scrollbarStyle="outsideOverlay" >
</ListView>
</LinearLayout>
package com.Android.GoogleCard;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.Window;
import android.widget.ListView;
public class MainActivity extends Activity {
private ListView mListView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.layout_main);
mListView=(ListView) findViewById(R.id.ListView);
GoogleCardAdapter mAdapter=new GoogleCardAdapter(this, getItems());
mListView.setAdapter(mAdapter);
}
private List<GoogleCard> getItems()
{
List<GoogleCard> mCards=new ArrayList<GoogleCard>();
for(int i=0;i<20;i++)
{
GoogleCard mCard=new GoogleCard("这是第"+(i+1)+"张卡片", getResource(i));
mCards.add(mCard);
}
return mCards;
}
private int getResource(int Index)
{
int mResult=0;
switch(Index%2)
{
case 0:
mResult=R.drawable.card_0;
break;
case 1:
mResult=R.drawable.card_1;
break;
}
return mResult;
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
最终程序运行效果如图所示：
