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

Question

我对 android UI 设计非常陌生。 我有 ListView 并且我正在使用适配器来用图像和文本填充视图。我正在使用 JSON 数据来填充 ListView。 到目前为止我已经实现了。

我不确定应用程序使用哪种类型的控件，例如显示项目列表的任何与播客相关的应用程序，并且在选择项目时，它会显示该项目的底部栏。如下图所示（红色突出显示）

应用图片

就像在那个图像中一样，我想在我的应用程序中拥有。

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

Answer 1

那个控件叫什么

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

---

如何实现相同的行为

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

• 在ListView 的布局中，您需要在ListView 下方或上方放置一个View。
• 覆盖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>

---

注意：

您可以控制底部栏的可见性以实现您的项目要求（仅当您单击ListView的项目时，底部栏才会可见）。