Question

我想要达到如下图所示的类似功能。看看每个细胞如何被包裹在白色的纸状背景上。我想这与Material Design指南有关。我该如何着手？

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和UI的优雅指南。用户体验必须具有吸引力的外观。

使用空格创建卡片视图的简单方法可以通过 -

完成

<!-- 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>

更详细的代码 -

Creating Lists and Cards

Getting Started With RecyclerView and CardView on Android

演示 -

Answer 3

您可以使用cardview或给出您在适配器中膨胀的布局的顶级margen

我百分百肯定你会得到白人潜水者

 <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

这是自定义列表视图，为实现这一点，我们将使用普通活动和布局xml文件来自定义列表视图。

在正常活动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文件，您可以在其中设计如何查看listview行，每行将根据此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？

4 个答案: