創建像Android棒棒糖快速撥號的視圖

Question

如何創建一個視圖，如Android棒棒糖中引入的快速撥號，當我們按電話圖標時可以找到它？下圖顯示了隱藏了聯繫人圖像和聯繫人姓名的圖像。

編輯： 到目前爲止我有這麼多，尋找更多的改善。這個例子在Fragment中使用GridView。

public class XYZFragment extends Fragment { 

    private View rootView; 

    GridView gridView; 
    ArrayList<Item> gridArray = new ArrayList<Item>(); 
    CustomGridViewAdapter customGridAdapter; 

    public XYZFragment() { 
    } 

    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
         Bundle savedInstanceState) { 

     rootView = inflater.inflate(R.layout.fragment_XYZ, container, false); 

     //set grid view item 
     Bitmap homeIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.ic_home); 
     Bitmap userIcon = BitmapFactory.decodeResource(this.getResources(), R.drawable.ic_communities); 

     gridArray.add(new Item(homeIcon,"Home")); 
     gridArray.add(new Item(userIcon,"User")); 
     gridArray.add(new Item(homeIcon,"House")); 
     gridArray.add(new Item(userIcon,"Friend")); 
     gridArray.add(new Item(homeIcon,"Home")); 
     gridArray.add(new Item(userIcon,"Personal")); 
     gridArray.add(new Item(homeIcon,"Home")); 
     gridArray.add(new Item(userIcon,"User")); 
     gridArray.add(new Item(homeIcon,"Building")); 
     gridArray.add(new Item(userIcon,"User")); 
     gridArray.add(new Item(homeIcon,"Home")); 
     gridArray.add(new Item(userIcon,"xyz")); 


     gridView = (GridView) rootView.findViewById(R.id.gridView1); 
     customGridAdapter = new CustomGridViewAdapter(getActivity(), R.layout.row_grid, gridArray); 
     gridView.setAdapter(customGridAdapter); 

     return rootView; 
     } 
    } 

row_grid.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:padding="5dp" > 

    <ImageView 
     android:id="@+id/item_image" 
     android:layout_width="50dp" 
     android:layout_height="50dp" 
     android:layout_marginRight="10dp" 
     android:src="@drawable/ic_home" > 
    </ImageView> 

    <TextView 
     android:id="@+id/item_text" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="5dp" 
     android:textSize="15sp" > 
    </TextView> 

</LinearLayout> 

fragment_xyz.xml

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin"> 

    <GridView 
     android:id="@+id/gridView1" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="4dp" 
     android:columnWidth="80dp" 
     android:gravity="center" 
     android:numColumns="auto_fit" 
     android:stretchMode="columnWidth" > 
    </GridView> 

</RelativeLayout> 

Item.java

public class Item { 
    Bitmap image; 
    String title; 

    public Item(Bitmap image, String title) { 
     super(); 
     this.image = image; 
     this.title = title; 
    } 
    public Bitmap getImage() { 
     return image; 
    } 
    public void setImage(Bitmap image) { 
     this.image = image; 
    } 
    public String getTitle() { 
     return title; 
    } 
    public void setTitle(String title) { 
     this.title = title; 
    } 
} 

CustomGridViewAdapter.java

public class CustomGridViewAdapter extends ArrayAdapter<Item> { 
    Context context; 
    int layoutResourceId; 
    ArrayList<Item> data = new ArrayList<Item>(); 

    public CustomGridViewAdapter(Context context, int layoutResourceId, 
     ArrayList<Item> data) { 
     super(context, layoutResourceId, data); 
     this.layoutResourceId = layoutResourceId; 
     this.context = context; 
     this.data = data; 
    } 

    @Override 
    public View getView(int position, View convertView, ViewGroup parent) { 
     View row = convertView; 
     RecordHolder holder = null; 

     if (row == null) { 
      LayoutInflater inflater = ((Activity) context).getLayoutInflater(); 
      row = inflater.inflate(layoutResourceId, parent, false); 
      holder = new RecordHolder(); 
      holder.txtTitle = (TextView) row.findViewById(R.id.item_text); 
      holder.imageItem = (ImageView) row.findViewById(R.id.item_image); 
      row.setTag(holder); 
     } else { 
      holder = (RecordHolder) row.getTag(); 
     } 

     Item item = data.get(position); 
     holder.txtTitle.setText(item.getTitle()); 
     holder.imageItem.setImageBitmap(item.getImage()); 
     return row; 
    } 

    static class RecordHolder { 
     TextView txtTitle; 
     ImageView imageItem; 
    } 
} 

Answer 1

更改網格視圖

<GridView 
     android:id="@+id/gridView1" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="4dp" 
     android:columnWidth="80dp" 
     android:gravity="center" 
     android:verticalSpacing="2dp" 
     android:horizontalSpacing="2dp" 
     android:numColumns="auto_fit" 
     android:background="#abcdef" 
     android:stretchMode="columnWidth" > 

然後在你的GridAdapter在運行時獲取行XML的父ID和設置背景顏色。