Android開發學習之仿GoogleNow卡片佈局

GoogleNow是Android4.1全新推出的一款應用他，它可以全面瞭解你的使用習慣，並為你提供現在或者未來可能用到的各種信息，GoogleNow提供的信息關聯度較高，幾乎是瞬間返回答案，總而言之，GoogleNow是Google提出的全新搜索概念。當然，GoogleNow最為引人註目的當屬它的卡片式設計。我們首先來看幾張GoogleNow的圖片：

我們可以看出，這種卡片式的界面設計更為簡潔，可以將用戶需要的信息直接地呈現在用戶面前，簡潔而不失美觀。那麼現在我們就來一起做一個這樣的卡片式界面吧！

首先我們先來建立一個佈局：

vcD4KPHByZSBjbGFzcz0=”brush:java;”>

通過這個佈局我們將完成一個圓角卡片的設計，其中圓角的實現是定義瞭一個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 mCards;
    private Context mContext;
    
    public GoogleCardAdapter(Context mContext,List 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;
    }
}

最後我們來看主界面的佈局和主要代碼：

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 getItems() 
	{
		List mCards=new ArrayList();
		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;
	}

}

最終程序運行效果如圖所示：