带有垂直标签的Android布局 - 设计类似于hello sms app

Question

有人可以帮我设计垂直标签，如给定的图片（取自你好的短信应用程序）

我不是要求代码片段，所以请不要将此问题作为家庭作业类型。我想知道的是我应该采取的方法。我是否通过一些样式和UI自定义扩展了库存TabLayout或现有的tablayout？您指向正确资源的指针将会有很大帮助。感谢

Answer 1

你可以在android中使用multipane layout实现这一点。在右侧使用片段创建listview片段和右侧实现详细信息屏幕。如果你想滑动左侧列表视图，请使用slidepanelayout。

<android.support.v4.widget.SlidingPaneLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/slide" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >
    <fragment android:id="@+id/leftpane"
              android:name="com.example.package.left"
              android:layout_width="200dp"
              android:layout_height="match_parent"
              android:layout_gravity="left"  />

    <fragment android:id="@+id/rightpane"
              android:name="com.example.package.right"
              android:layout_width="350dp"
              android:layout_height="match_parent"
              android:layout_gravity="right"
              android:layout_weight="1"
          />

</android.support.v4.widget.SlidingPaneLayout>

Answer 2

我认为 TabLayout 无法实现，因为它仅支持水平方向。

但是您可以将SlidingPanel与NavigationDrawer一起使用，在这里您可以根据需要设计DrawerItemLayout并获得所需的确切布局。

请检查链接#1.和#2.

我认为这可以减少您的工作量，并且可以轻松完成任务。

Answer 3

您不能在此处使用TabLayout，因为它不适合您的目的。你可以做的是有两个布局 - 可能是线性的（或相对的）基本上将屏幕分成顶部，layout_weight可能为2，底部布局的layout_weight为8（20/80）分割。

从这里开始，只需设计布局即可。看起来你的顶层布局就像一个微调器小部件。您可以使用此对象或列表视图对象。您的底部布局肯定包含列表视图。您可以在每行中使用某种设计实现自己的列表视图窗口小部件，也可以使用xml布局文件并在ArrayAdapter中引用它。真的，你的选择是无止境的。对于底部布局的左侧部分，您可以使用垂直LinearLayout来保存对话中人物的图像。

并且不要忘记隐藏ActionBar - 如果你想要的话。

Answer 4

我要做的是将给定比例的屏幕分成两部分。将带有适配器的列表视图插入左侧，并使用右侧的片段。但使用表格并不是一个好主意。使用Fragments将使事情变得更容易。查看this链接以获取概述。看看2.2和2.3节。

对于右侧，内部片段，您可以使用另一个包含图像和文本的列表视图。

Answer 5

您可以在此导航栏中使用 NavigationDrawer 和 listview 来实现此目的。

此列表视图将为其行使用单独的xml布局。将在屏幕截图。

中显示内部图片视图

Answer 6

这不是一个列表视图，它只是一个滑动菜单。了解滑动菜单，您可以实现所需的设计。这将有助于你。 https://github.com/jfeinstein10/SlidingMenu

Answer 7

否，您不必自定义任何视图。你可以

1. 将RecyclerView用于化身列表。如果选择了头像，则只需将所选项目的背景更改为设计中的黑色U形状即可。
2. 使用详细视图显示您的头像信息。