防止 TextView 在相对布局中重叠下一个元素答案

【问题标题】：Prevent TextView overlap next element in Relative layout防止 TextView 在相对布局中重叠下一个元素
【发布时间】：2019-01-19 18:07:24
【问题描述】：

我正在创建如下标题栏，“主页”和“抽屉”图标将根据案例设置可见/消失。如何使文本视图不与“主页”/“抽屉”图标重叠？？

这就是我的代码所具有的，我手动将文本视图边距设置为主页和抽屉图标，但是，当主页/抽屉图标被隐藏时，文本仍然保持主页按钮出现.如何根据可用空间设置文本视图完美换行？

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <ImageButton
        android:id="@+id/actionbar_backbutton"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="?attr/actionBarItemBackground"
        android:scaleType="centerInside"
        android:src="@drawable/ic_arrow_back_black_24dp" />

    <TextView
        android:id="@+id/actionbar_title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="105dp"
        android:layout_toRightOf="@id/actionbar_backbutton"
        android:background="?attr/actionBarItemBackground"
        android:ellipsize="end"
        android:gravity="center"
        android:maxLines="1"
        android:text="@string/Easybook_com"
        android:textColor="@color/colorBlackText"
        android:textSize="20sp" />

    <ImageButton
        android:id="@+id/actionbar_homebutton"
        android:layout_width="?attr/actionBarSize"
        android:layout_height="match_parent"
        android:layout_toLeftOf="@+id/actionbar_drawerbutton"
        android:layout_alignParentTop="true"
        android:background="?attr/actionBarItemBackground"
        android:scaleType="centerInside"
        android:src="@drawable/ic_home_black" />

    <ImageButton
        android:id="@+id/actionbar_drawerbutton"
        android:layout_width="?attr/actionBarSize"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="?attr/actionBarItemBackground"
        android:scaleType="centerInside"
        android:src="@drawable/ic_drawer" />

    <ImageView
        android:id="@+id/actionbar_reddot"
        android:layout_width="?attr/actionBarSize"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="?attr/actionBarItemBackground"
        android:scaleType="centerInside" />

【问题讨论】：

检查我的改进答案以满足您的应用要求。

标签： android android-layout textview word-wrap

【解决方案1】：

您可以将 TextView 设置在两个按钮之间的空间中，如下所示：

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageButton
    android:id="@+id/actionbar_backbutton"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="?attr/actionBarItemBackground"
    android:scaleType="centerInside"
    android:src="@drawable/ic_arrow_back_black_24dp" />

<ImageButton
    android:id="@+id/actionbar_homebutton"
    android:layout_width="?attr/actionBarSize"
    android:layout_height="match_parent"
    android:layout_toLeftOf="@+id/actionbar_drawerbutton"
    android:layout_alignParentTop="true"
    android:background="?attr/actionBarItemBackground"
    android:scaleType="centerInside"
    android:src="@drawable/ic_home_black" />

<ImageButton
    android:id="@+id/actionbar_drawerbutton"
    android:layout_width="?attr/actionBarSize"
    android:layout_height="match_parent"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="?attr/actionBarItemBackground"
    android:scaleType="centerInside"
    android:src="@drawable/ic_drawer" />

<TextView
    android:id="@+id/actionbar_title"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="105dp"
    android:layout_toRightOf="@id/actionbar_backbutton"
    android:layout_toLeftOf="@id/actionbar_homebutton"
    android:background="?attr/actionBarItemBackground"
    android:ellipsize="end"
    android:gravity="center"
    android:maxLines="1"
    android:text="@string/Easybook_com"
    android:textColor="@color/colorBlackText"
    android:textSize="20sp" />

</RelativeLayout>

【讨论】：

这使文本视图从主页按钮开始 - 从右到左，我希望它从左到右开始
如果您的意思是文本从右到左，您可以使用 textview 的 textDirection 属性并将其设置为 ltr

【解决方案2】：

在 TextView 中同时使用 startOf,leftOf 和 endOf,rightOf。

android:layout_toRightOf="@id/actionbar_backbutton"
android:layout_toStartOf="@id/actionbar_backbutton"
android:layout_toLeftOf="@id/actionbar_homebutton"
android:layout_toEndOf="@id/actionbar_homebutton"

【讨论】：

如果您没有使用一些自定义功能，而Action Bar 没有提供，那么您应该使用操作栏，从长远来看，这将对您有所帮助。

【解决方案3】：

试试这个..

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">


    <ImageButton
        android:id="@+id/actionbar_backbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="?attr/actionBarItemBackground"
        android:scaleType="centerInside"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_arrow_back_black_24dp" />

    <TextView
        android:id="@+id/actionbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:background="?attr/actionBarItemBackground"
        android:ellipsize="end"
        android:gravity="center"
        android:maxLines="1"
        android:layout_toRightOf="@id/actionbar_backbutton"
        android:text="@string/Easybook_com"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="20sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:layout_toRightOf="@+id/actionbar_title"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/actionbar_homebutton"
            android:layout_width="?attr/actionBarSize"
            android:layout_height="wrap_content"
            android:background="?attr/actionBarItemBackground"
            android:scaleType="centerInside"
            android:src="@drawable/ic_home_black" />

        <ImageButton
            android:id="@+id/actionbar_drawerbutton"
            android:layout_width="?attr/actionBarSize"
            android:layout_height="wrap_content"
            android:background="?attr/actionBarItemBackground"
            android:scaleType="centerInside"
            android:src="@drawable/ic_drawer" />

        <ImageView
            android:id="@+id/actionbar_reddot"
            android:layout_width="?attr/actionBarSize"
            android:layout_height="wrap_content"
            android:background="?attr/actionBarItemBackground"
            android:scaleType="centerInside" />
    </LinearLayout>


</RelativeLayout>

【讨论】：

我无法使用 LinearLayout 对图像进行分组，因为我需要将 reddot n 抽屉按钮放置在副本中

【解决方案4】：

我认为你让它变得更复杂了。您也可以像这样执行您的要求，您与您的活动 xml 无关。

现在，在您的 Activity 的 onCreate 中：

setTitle("Your Title");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

然后，为 menu 实现这两个默认方法，

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_view, menu);
return super.onCreateOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
    case android.R.id.home:
        onBackPressed();
        break;
    case R.id. actionbar_drawerbutton:
        //your code
        break;
    case R.id. actionbar_reddot:
    //your code
    break;
    }
return super.onOptionsItemSelected(item);
}

现在你必须像这样在res/menu/menu_view.xml 创建一个xml文件，

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">

<item
        android:title="Drawer Button"
        android:id="@+id/actionbar_drawerbutton"
        android:icon="@drawable/ic_menu_camera"
        app:showAsAction="always">
</item>
<item
        android:title="Red Dot"
        android:id="@+id/actionbar_reddot"
        android:icon="@drawable/ic_favorite"
        app:showAsAction="always">
</item>

</menu>

这将管理您的所有案件。尝试这个。我相信你会得到更好的输出。

【讨论】：

【解决方案5】：

替换TextView和use startOf and EndOf instead of LeftOf and rightOf

<TextView
        android:id="@+id/actionbar_title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="105dp"
        android:layout_toRightOf="@id/actionbar_backbutton"
        android:layout_toLeftOf="@id/actionbar_homebutton"
        android:background="?attr/actionBarItemBackground"
        android:ellipsize="end"
        android:gravity="center"
        android:maxLines="1"
        android:text="@string/Easybook_com"
        android:textColor="@color/colorBlackText"
        android:textSize="20sp" />

【讨论】：

好像一次不能包含两个对齐，android:layout_toEndOf="@id/actionbar_backbutton" android:layout_toStartOf="@id/actionbar_homebutton" 它只影响开始