帶有垂直標簽的Android布局 - 設計類似於hello sms app

Question

有人可以幫我設計垂直標簽，如給定的圖片（取自你好的短信應用程序）

我不是要求代碼片段，所以請不要放棄這個問題作為家庭作業類型。 我想知道的是我應該采取的方法。 我是否通過一些樣式和UI自定義擴展了庫存TabLayout或現有的tablayout？ 您指向正確資源的指針將會有很大幫助。 謝謝

Answer 1

你可以在android中使用multipane layout實現這一點。 在右側使用片段創建listview片段和右側實現詳細信息屏幕。 如果你想滑動左側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無法實現這一點 ，因為它只支持水平方向。

但是你可以使用帶有NavigationDrawer SlidingPanel ，你可以根據你的要求設計DrawerItemLayout，並獲得你想要的確切布局。

請檢查＃1鏈接。 ＆ ＃2。

我認為這可以減少您的努力，您可以輕松完成任務。

Answer 3

你不能在這里使用TabLayout，因為它不適合你的目的。 你可以做的是有兩個布局 - 可能是線性的（或相對的）基本上將屏幕分成頂部，layout_weight可能為2，底部布局的layout_weight為8（20/80）分割。

從這里開始，只需設計布局即可。 看起來你的頂層布局就像一個微調器小部件。 您可以使用此對象或列表視圖對象。 您的底部布局肯定包含列表視圖。 您可以在每行中使用某種設計實現自己的列表視圖窗口小部件，也可以使用xml布局文件並在ArrayAdapter中引用它。 真的，你的選擇是無止境的。 對於底部布局的左側部分，您可以使用垂直LinearLayout來保存對話中人物的圖像。

而且不要忘記隱藏ActionBar - 如果你想要的話。

Answer 4

我要做的是將給定比例的屏幕分成兩部分。 將帶有適配器的列表視圖插入左側，並使用右側的片段。 但使用表格並不是一個好主意。 使用Fragments將使事情變得更容易。 請查看此鏈接以獲取概述。 看看2.2和2.3節。

對於右側，內部片段，您可以使用帶有圖像和文本的另一個列表視圖。

Answer 5

您可以通過在此導航抽屜中使用NavigationDrawer和listview來實現此目的。

此列表視圖將為其行使用單獨的xml布局 。 這將在屏幕截圖中顯示內部的圖像視圖。

Answer 6

這不是列表視圖，它只是一個滑動菜單。 了解滑動菜單，您可以實現所需的設計。 這將有助於你。 https://github.com/jfeinstein10/SlidingMenu

Answer 7

不，你不必定制任何視圖。 你可以

1. 使用RecyclerView獲取頭像列表。 如果選擇了頭像，則只需將所選項目的背景更改為黑色U形，如設計中所示。
2. 使用詳細視圖顯示您的頭像信息。