java - 如何在android中制作卡片式菜单

Question

我想在我的应用程序中添加卡片样式，如下所示

我在我的应用程序中使用mysql数据库，所以我需要制作这样的卡片并将数据库中的数据放入其中，现在我使用带有此代码的ListView

public void listAllItme() {
    ListAdapter lA = new listAdapter(listitems);
    listView.setAdapter(lA);


    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                Intent open = new Intent(R_arabic.this, rewaya_show.class);
                open.putExtra("name", listitems.get(position).name);
                open.putExtra("url", listitems.get(position).url);
                open.putExtra("img", listitems.get(position).img);
                open.putExtra("num", listitems.get(position).num);

                startActivity(open);


            }
        }
    });

}



class listAdapter extends BaseAdapter {
    ArrayList<listitem_gib> lista = new ArrayList<listitem_gib>();

    public listAdapter(ArrayList<listitem_gib> lista) {
        this.lista = lista;
    }

    @Override
    public int getCount() {
        return lista.size();
    }

    @Override
    public Object getItem(int position) {
        return lista.get(position).name;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        LayoutInflater layoutInflater = getLayoutInflater();
        View view = layoutInflater.inflate(R.layout.row_item_gib, null);

        TextView name = (TextView) view.findViewById(R.id.textView_gib);
        ImageView img = (ImageView) view.findViewById(R.id.imageView_gib);
        TextView num = (TextView) view.findViewById(R.id.textView_gib2);
        TextView size = (TextView) view.findViewById(R.id.textView_gib3);


        name.setText(lista.get(position).name);
        num.setText(lista.get(position).num);
        size.setText(lista.get(position).size);


        Picasso.with(R_arabic.this).load("http://grassyhat.com/android/image/" + lista.get(position).img).into(img);


        return view;
    }
}

首先我想知道如何制作这样的卡片样式

第二个我如何使用此代码与卡片菜单而不是 ListView

抱歉，我是 Android 新手，抱歉我的英语不好

Answer 1

卡片菜单是什么意思？因为图像中的示例是带有cardview项目的recyclerview，所以您可以通过执行类似的操作来实现此目的

这将是您的 Activity

public class MainActivity extends AppCompatActivity {

private RecyclerView recyclerView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    recyclerView = (RecyclerView)findViewById(R.id.recyclerView);

    //Just your list of objects, in your case the list that comes from the db
    List<Items> itemsList = new ArrayList<>();
    CardAdapter adapter = new CardAdapter(this, itemsList);

    //RecyclerView needs a layout manager in order to display data so here we create one
    StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);

    //Here we set the layout manager and the adapter to the listview
    recyclerView.setLayoutManager(layoutManager);
    recyclerView.setAdapter(adapter);
}

在布局文件中，您只需像这样放置 recyclerview

<RelativeLayout
android:id="@+id/activity_main"
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"
tools:context="jsondh.myapplication.MainActivity">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</RelativeLayout>

那么你的适配器将是这样的

public class CardAdapter extends RecyclerView.Adapter<CardAdapter.CardViewHolder> {

private List<Items> itemsList;
private Activity activity;

public CardAdapter(Activity activity, List<Items> items){
    this.activity = activity;
    this.itemsList = items;
}

@Override
public CardViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View itemView = activity.getLayoutInflater().inflate(R.layout.cardview_layout, parent, false);
    return new CardViewHolder(itemView);
}

@Override
public void onBindViewHolder(CardViewHolder holder, int position) {
    //Here you bind your views with the data from each object from the list
}

@Override
public int getItemCount() {
    return itemsList.size();
}

public class CardViewHolder extends RecyclerView.ViewHolder {

    public ImageView bookImage;
    public TextView bookLabel01, bookLabel02;

    public CardViewHolder(View itemView) {
        super(itemView);
        bookImage = (ImageView)itemView.findViewById(R.id.image);
        bookLabel01 = (TextView)itemView.findViewById(R.id.label01);
        bookLabel02 = (TextView)itemView.findViewById(R.id.label02);
    }
}

最后一个将是列表中每个项目的布局，如下所示

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp">

<android.support.v7.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardElevation="15dp"
    app:cardBackgroundColor="#3369Ed">

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

        <ImageView
            android:id="@+id/image"
            android:layout_width="150dp"
            android:layout_height="130dp"/>

        <TextView
            android:id="@+id/label01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Label"
            android:layout_gravity="right"
            android:padding="5dp"
            android:textColor="#ffffff"/>

        <TextView
            android:id="@+id/label02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="LongerLabel"
            android:layout_gravity="right"
            android:padding="5dp"
            android:textColor="#ffffff"/>

    </LinearLayout>

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

您还必须将其添加到您的 gradle 文件中:

compile 'com.android.support:recyclerview-v7:25.0.0'

compile 'com.android.support:cardview-v7:25.0.0'

希望对你有帮助!