relativeLayout、scrollview、およびナビゲーションバーの下
-
25-10-2019 - |
質問
私がやりたいのは、次のようなレイアウトを作成することです。
題名
日にち
スクロール付きの長いテキスト
ナビゲーションバーは底に付着します
さて、私はすべてをしましたが、スクロールに少し問題があります。テキストをスクロールするだけです。タイトルと日付は、上部に固執し、NAVバーはアクティビティの底に固執する必要があります。そして、はい、それは動作しますが、私のナビゲーションバーはテキストを重ねます:/
私はすべてを試しました、私が見つけたソリューションが1つあり、ScrollViewの固定高さを設定しますが、これはすべてのデバイスでうまく機能しませんよね?おそらくコードでいくつかの計算を行うことができ、その上で高さを変えますが、XMLにとどまりたいと思います。
何か提案がありますか?
これが私のXMLファイルです:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:orientation="vertical" >
<TextView
android:id="@+id/feed_title"
style="@style/h1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical" />
<TextView
android:id="@+id/feed_info"
style="@style/h2"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<ImageView
android:id="@+id/feed_fav_ico"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical|right"
android:background="@drawable/ic_fav_off" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollY="20dp" >
<TextView
android:id="@+id/feed_text"
style="@style/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Loren ipsum full tekst" />
</ScrollView>
</LinearLayout>
<!-- Buttons -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#FFFFFF"
android:orientation="vertical"
android:paddingBottom="5dp" >
<Button
android:id="@+id/go_to_article"
style="@style/button_screen"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="15dp"
android:text="@string/feed_show_full" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="@+id/next_feed"
style="@style/button_screen"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@drawable/button_arrow_up" />
<Button
android:id="@+id/share_feed"
style="@style/button_screen"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="@string/feed_share" />
<Button
android:id="@+id/delete_feed"
style="@style/button_screen"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="@string/feed_delete" />
<Button
android:id="@+id/prev_feed"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@drawable/button_arrow_down" />
</LinearLayout>
</LinearLayout>
<!-- ~Buttons -->
</RelativeLayout>
解決
これが私が変えたものです:
- トップレイアウトを下に移動しました
- 下のレイアウト名を付けました
android:id="@+id/bottom_layout"
- トップレイアウトに名前を付けました
android:id="@+id/top_layout"
(明確にするためだけに必要ではありません) これで、トップレイアウトにはこれらのプロパティがあります。
android:layout_above="@id/bottom_layout"
android:layout_alignParentTop="true"
最初のものは、トップレイアウトを下部レイアウトの上に固定することです。 2つ目は、トップレイアウトのトップエッジを親のトップに並べることです。この場合、これはrelativeLayoutです。
これで、ボトムレイアウトにはこれらのプロパティがあります。
android:layout_alignParentBottom="true"
ボトムレイアウトのボトムエッジが親のボトムエッジと一致することがわかります(これはrelativeLayoutです)
以下は完全に機能するレイアウトです。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- Buttons -->
<LinearLayout
android:id="@+id/bottom_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#FFFFFF"
android:orientation="vertical"
android:paddingBottom="5dp" >
<Button
android:id="@+id/go_to_article"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="15dp"
android:text="Feed full" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="@+id/next_feed"
android:layout_width="40dp"
android:layout_height="40dp" />
<Button
android:id="@+id/share_feed"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="share" />
<Button
android:id="@+id/delete_feed"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="delete" />
<Button
android:id="@+id/prev_feed"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
<!-- ~Buttons -->
<LinearLayout
android:id="@+id/top_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@id/bottom_layout"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:orientation="vertical" >
<TextView
android:id="@+id/feed_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical" />
<TextView
android:id="@+id/feed_info"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<ImageView
android:id="@+id/feed_fav_ico"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical|right"
android:background="@drawable/ic_launcher" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollY="20dp" >
<TextView
android:id="@+id/feed_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/long_test" />
</ScrollView>
</LinearLayout>
</RelativeLayout>
他のヒント
スクロールレイアウトに重みを置いてみましたか?
LinearLayout
- LinearLayout
-- Title
-- Date
- ScrollView layout_weigth=1
-- TextView
- LinearLayout
-- Button
-- Button
-- Button
LinearLayoutの下端(L1と呼びましょう)をテキストを保持し、ナビゲーションバーを保持する線形レイアウトの上端に合わせます(L2と呼びましょう)。 l1のabsoluteLayout.aboveがL2に等しくなるように。
<LinearLayout android:id="@+id/l1"
android:layout_above="@+id/l2">
</LinearLayout>
ジョナスが言うように、しかしあなたにもっとリッテを与えるために、他のものを埋めるようにしてください。
<LinearLayout
android:layout_height="fill-parent">
<LinearLayout
android:layout_height="wrap_content">
put your title and things in here
</LinearLayout>
<ScrollView
android:layout_height="fill_parent"
android:layout_weight="1"> <!-- this makes it not overlap the layout(navbar) below-->
put your title and things in here
</ScrollView>
<LinearLayout
android:layout_height="wrap_content">
put your nav bar stuff in here
</LinearLayout>
</LinearLayout>
Layout_Weightを設定しない場合、ScrollViewは実際にこの構成の画面の下部からNavbarを押し出します。レイアウトのためのスペースがどのように予約されているかと関係がありますが、その理由は完全にはわかりませんが、重量を追加すると、後で予約が遅れます。 ScrollViewは親を埋めていますが、それでも線形レイアウトの一部であるため、レイアウトはより低いNavbarを必ず添加します。相対レイアウトとは異なり、オーバーラップはありません。