如何在底部显示带有图像和文本的所选列表视图项（Android视图）

Question

我是Android UI设计的新手。 我有ListView，我正在使用适配器用图像和文本来扩充视图。我正在使用JSON数据填充ListView。 到目前为止我已经实施了。

我不确定哪种类型的控件用于应用程序，如任何播客相关应用程序，它显示项目列表和项目选择，它显示带有该项目的底栏。如下图所示（红色突出显示）

App Image

就像在那张图片中一样，我希望在我的应用程序中使用。

该控件是什么叫做以及如何实现相同的行为？ 任何建议都将受到高度赞赏。

Answer 1

  

什么是控件叫

就像@Nero所说，你只需要在底部有一个额外的视图。您可以自己创建想要轻松找到的控件。

  

如何实现相同的行为

基于您的项目的两个步骤：

• 在ListView的布局中，您需要在View下方或ListView上方放置IOnItemClickListener。
• 覆盖Main.axml。

以下是演示。

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:id="@+id/lv" android:layout_height="match_parent" android:layout_width="match_parent" /> <LinearLayout android:id="@+id/bottom_ll" android:orientation="horizontal" android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_alignParentBottom="true" android:background="@android:color/holo_red_light"> <ImageView android:id="@+id/bottom_iv_start" android:src="@drawable/qq" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_weight="1" /> <TextView android:id="@+id/bottom_tv" android:text="TextView" android:layout_height="wrap_content" android:layout_width="wrap_content" /> <ImageView android:id="@+id/bottom_iv_end" android:src="@drawable/qq" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_weight="1" /> </LinearLayout> </RelativeLayout> ：

Relativelayout

此处，listview是根视图，因此您可以将底栏放在MainActivity

上

MyAdapter和namespace Podcast { [Activity(Label = "Podcast", MainLauncher = true)] public class MainActivity : Activity, IOnItemClickListener { ListView mListView; ImageView mIv_start, mIv_end; TextView mtv; List<Item> list; public void OnItemClick(AdapterView parent, View view, int position, long id) { mtv.Text = list[position].tv; mIv_start.SetImageResource( list[position].iv_start); mIv_end.SetImageResource(list[position].iv_end); } protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState); // Set our view from the "main" layout resource SetContentView(Resource.Layout.Main); list = new List<Item>(); Item item = new Item(); item.iv_start= Resource.Drawable.rr; item.iv_end = Resource.Drawable.rr; item.tv = "textview0"; list.Add(item); Item item1 = new Item(); item1.iv_start = Resource.Drawable.capture; item1.iv_end = Resource.Drawable.capture; item1.tv = "textview1"; list.Add(item1); list.Add(item); list.Add(item); list.Add(item); list.Add(item); list.Add(item); list.Add(item); list.Add(item); list.Add(item); list.Add(item); list.Add(item); mIv_end = FindViewById<ImageView>(Resource.Id.bottom_iv_end); mIv_start = FindViewById<ImageView>(Resource.Id.bottom_iv_start); mtv = FindViewById<TextView>(Resource.Id.bottom_tv); mListView = FindViewById<ListView>(Resource.Id.lv); MyAdapter myAdapter = new MyAdapter(this, list); mListView.Adapter = myAdapter; mListView.OnItemClickListener=this; } } public class MyAdapter : BaseAdapter<Item> { Activity mContext; List<Item> mList; public MyAdapter(Activity context, List<Item> list) { this.mContext = context; this.mList = list; } public override Item this[int position] => mList[position]; public override int Count => mList.Count; public override long GetItemId(int position) { return position; } public override View GetView(int position, View convertView, ViewGroup parent) { View view = convertView; // re-use an existing view, if one is available if (view == null) // otherwise create a new one view = mContext.LayoutInflater.Inflate(Resource.Layout.Item, null); view.FindViewById<TextView>(Resource.Id.item_tv).Text = mList[position].tv; view.FindViewById<ImageView>(Resource.Id.item_iv_start).SetImageResource(mList[position].iv_start); view.FindViewById<ImageView>(Resource.Id.item_iv_end).SetImageResource(mList[position].iv_end); return view; } } } ：

OnItemClick

在Item方法中，您可以在单击列表视图项时更改底栏。

namespace Podcast { public class Item { public int iv_start,iv_end; public string tv; } } ：

Item.axml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/item_ll" android:orientation="horizontal" android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_alignParentBottom="true"> <ImageView android:src="@drawable/qq" android:id="@+id/item_iv_start" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_weight="1" /> <TextView android:id="@+id/item_tv" android:text="TextView" android:layout_height="wrap_content" android:layout_width="wrap_content" /> <ImageView android:src="@drawable/qq" android:id="@+id/item_iv_end" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_weight="1" /> </LinearLayout> ：

const Compute = require('@google-cloud/compute');
const gce = new Compute({
  projectId: 'your-project-id-here'
});

gce.getVMs({
    maxResults: 100,
    filter: 'name eq ^prefix.*'
}, function(err, vms) {
  console.log(vms);
});

注意：

您可以控制底栏的可见性以达到项目的要求（仅当您单击ListView的项目时，底栏才会显示。）