如何在android中創建自定義UI像Pulse

Question

我正在嘗試創建類似於Pulse android應用的自定義UI。 據我了解，首先，我必須先創建一個自定義按鈕，如下圖所示。

我的按鈕上有圖像和文字覆蓋。 我知道這是一個基本問題，但是由於我是android開發的初學者，因此我正面臨這個問題。 請幫助我了解如何進行此操作。

Answer 1

您可以從ImageView和TextView組成一個簡單的布局，該布局與底部對齊，並帶有黑色文本和一些透明度。 兩個視圖均應放置在RelativeLayout. 然后，為RelativeLayout設置一個Click偵聽器，並對click采取適當的操作。

例如：

<RelativeLayout
    android:id="@+id/item"
    android:layout_width="150dp"
    android:layout_height="150dp" >

    <ImageView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/my_test_image" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="#4000"
        android:text="Giorgio Armany Galaxy S"
        android:textColor="#FFF" />

</RelativeLayout>

然后在您的程序中：

RelativeLayout item=(RelativeLayout)findViewById(R.id.item);
    item.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            // take action
        }
});

這是一種情況。 另一種情況是擴展Button並根據需要組成您的自定義UI組件，這將涉及更多的編碼，但是您將擁有一個唯一的組件。

Answer 2

如果回答了您的問題，請接受答案。

現在有關網格集成的部分：將上面示例的XML內容（RelativeLayout + ImageView + TextView）保存到一個新的XML文件中，使其為layout/grid_item.xml 。
為ImageView和TextView添加唯一的id

然后，在適配器的getView()方法中為該布局充氣，並通過id查找ImageView和TextView，並設置適當的內容。

請注意，這不是完整的源代碼，但是基本架構應如下所示：

public View getView(int position, View convertView, ViewGroup parent) {
    ....
    convertView = mInflater.inflate(R.layout.grid_item, null);
    ....

    ImageView myImage=(ImageView)convertView.findViewById(R.id.my_image);
    TextView myTextView=(TextView)convertView.findViewById(R.id.my_textview);

    myImage.setImageResource(...);
    myTextView.setText(...);
    ...

    return convertView
}