如何為每個具有單獨白色背景的單元格設置Listview？

Question

我想要實現類似下圖所示的功能。 看一下如何在白色紙樣背景上封閉每個單元格。 我想這與材料設計指南有關。 我該如何進行呢？

列表顯示

Answer 1

列表中每個項目的布局均應為cardview。 您可以在這里查看android文檔： https : //developer.android.com/training/material/lists-cards.html#CardView

您的列表項布局可以如下所示：

<LinearLayout 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"
... >
<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="4dp">

    <TextView
        android:id="@+id/info_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.v7.widget.CardView>

在CardView小部件內，您可以添加其他元素。

Answer 2

Material Design是有關如何使UI和UX呈現精美外觀的經典指南。

創建帶有空格的卡片視圖的簡單方法可以通過-

<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="4dp">

    <TextView
        android:id="@+id/info_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v7.widget.CardView>

更詳細的代碼-

創建列表和卡片

Android上的RecyclerView和CardView入門

演示-

Answer 3

您可以使用cardview或提供您在適配器中膨脹的布局的頂部標記

我100％確定您會得到白色潛水員

 <android.support.v7.widget.RecyclerView
        android:id="@+id/manageProRequestRV"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"/> 

和你的適配器布局我喜歡

<?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:orientation="vertical"
    android:layout_marginTop="@dimen/padding_avarage"
    android:background="#00706b">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="@dimen/padding_avarage"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:gravity="center"
                android:paddingRight="@dimen/padding_avarage"
                android:text="ID" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:gravity="center"
                android:paddingRight="@dimen/padding_avarage"
                android:text="Product Service" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:gravity="center"
                android:paddingRight="@dimen/padding_avarage"
                android:text="Category" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:gravity="center"
                android:paddingRight="@dimen/padding_avarage"
                android:text="Subcategory" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:gravity="center"
                android:paddingRight="@dimen/padding_avarage"
                android:text="Quantity" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/padding_large"
            android:layout_weight="1"
            android:orientation="vertical"
            android:paddingLeft="@dimen/padding_avarage">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:gravity="center"
                android:paddingRight="@dimen/padding_avarage"
                android:text="13" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:gravity="center"
                android:paddingRight="@dimen/padding_avarage"
                android:text="2" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:gravity="center"
                android:paddingRight="@dimen/padding_avarage"
                android:text="Bags &amp; luggage" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:gravity="center"
                android:paddingRight="@dimen/padding_avarage"
                android:text="Laptop bags" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:gravity="center"
                android:paddingRight="@dimen/padding_avarage"
                android:text="5" />
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/view"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:background="@color/white"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="32dp"
                android:layout_height="48dp"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/view"/>
            <TextView

                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:background="@drawable/color_button_selector"
                android:text="View"
                android:paddingLeft="@dimen/padding_avarage"
                android:textSize="@dimen/text_big"
                android:textColor="@color/blue_light" />
        </LinearLayout>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@color/dark_gray" />

        <LinearLayout
            android:id="@+id/remove"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:background="@color/white"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="32dp"
                android:layout_height="48dp"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/cancel"/>
            <TextView

                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:background="@drawable/color_button_selector"
                android:text="Remove"
                android:paddingLeft="@dimen/padding_avarage"
                android:textSize="@dimen/text_big"
                android:textColor="@color/blue_light" />
        </LinearLayout>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/outline" />
</LinearLayout>

Answer 4

這是Custom listview，要實現此目的，我們將使用常規活動和布局xml文件來自定義listview。

在正常的活動xml文件中，將Layout的背景設置為某種顏色，例如，我假設活動xml為activity_main.xml。

activity_main.xml

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#bdbdbd" >

    <ListView
        android:id="@+id/listView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:clickable="false"
        android:layout_margin="10dp"
        android:background="#FFFFFF"
        android:listSelector="@android:color/transparent"
        android:divider="#bdbdbd"
        android:dividerHeight="3dip"></ListView>

    </RelativeLayout>

在MainActivity.java中

public class MainActivity extends ActionBarActivity
 {

 ListView listView;
 ArrayList<MyData> list = new ArrayList<MyData>();
 MyOrderAdapter myadapter;
 protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

listView =  (ListView) findViewById(R.id.listView);

//add the data to setter and getter class,

    list.add(new MyData("Name","Desc")); //here i am ading only one row,   you can do this in loop for multiple rows

myadapter = new MyOrderAdapter(MainActivity.this, R.layout.my_custom_list,list); //myadapter is adapter class used for custom display

 //my_custom_list is .xml file used to display the listview row in customised way, need to create new xml file
    listView.setItemsCanFocus(false);
    listView.setAdapter(myadapter);
    myadapter.notifyDataSetChanged();
  }

創建MyData.java類

public class MyData {

String name,desc;

public MyData(String name, String desc) {
    super();
    this.name = name;
    this.desc = desc;

}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

public String getDesc() {
    return desc;
}

public void setDesc(String desc) {
    this.desc = desc;
}

}

my_custom_list.xml

這是您設計如何查看列表視圖行的xml文件，將基於此xml顯示每行

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#00000000"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">

 <LinearLayout
     android:id="@+id/linearLayout10"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignParentTop="true"
     android:layout_marginLeft="10dp"
     android:orientation="vertical" >

    <LinearLayout android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:orientation="horizontal">

<TextView
    android:id="@+id/name"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1" 
    android:fontFamily="sans-serif"
    android:text="Name" />

 <TextView
    android:id="@+id/desc"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1" 
    android:ems="10"
    android:fontFamily="sans-serif"
    android:text="Desc" />


</LinearLayout>

MyOrderAdapter.java

公共類MyOrderAdapter擴展了ArrayAdapter {

        Context context;
        int layoutResourceId;
        ArrayList<MyData> data = new ArrayList<MyData>();


        public MyOrderAdapter(Context context, int layoutResourceId,ArrayList<MyData> data) {
            super(context, layoutResourceId, data);
            this.layoutResourceId = layoutResourceId;
            this.context = context;
            this.data = data;
            }
        @SuppressLint("ResourceAsColor")
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
        View row = convertView;
        UserHolder holder = null;

        if (row == null) {
        LayoutInflater inflater = ((Activity) context).getLayoutInflater();
        row = inflater.inflate(layoutResourceId, parent, false);
        holder = new UserHolder();
        holder.name = (TextView) row.findViewById(R.id.name);
        holder.desc = (TextView) row.findViewById(R.id.desc);



        row.setTag(holder);
        } else {
        holder = (UserHolder) row.getTag();
        }

        final MyData mCon = data.get(position);


        holder.name.setText(mCon.getName));

        holder.desc.setText(mCon.getDesc));

        return row;
        }
        static class UserHolder {
            TextView name,desc;
            }

    }

這將以您提到的相同模式顯示listview。