Question

关于我正在设计的初始应用屏幕，我有几个简单的UI问题：

（a）如何使'Join ...'和'Sign ...'按钮周围的灰色框变得透明？

（b）是否有不同程度的透明度？

（c）当我在纵向和横向之间切换时，我的按钮消失。我怎样才能让它们可见？

Portrait UI...

Landscape UI...

（d）如何将“公司XYZ”添加到TextView并将其置于灰色框内的两个按钮上方？

以下是我目前的代码......

我的activity_main.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.companyxyz.companyxyz_0002.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main"/>

</android.support.design.widget.CoordinatorLayout>

我的content_main.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#fff"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="48dp"
    android:paddingRight="48dp"
    android:paddingTop="368dp"
    android:paddingBottom="48dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main"
    tools:context="com.companyxyz.companyxyz_0002.MainActivity">

    <LinearLayout
        android:background="#eee"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:paddingTop="40dp"
        android:paddingBottom="8dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <Button
            android:layout_height="wrap_content"
            android:layout_marginRight="2dp"
            android:text="Join Free"
            android:layout_width="fill_parent"
            android:layout_weight="1"/>

        <Button
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dp"
            android:text="Sign In"
            android:layout_width="fill_parent"
            android:layout_weight="1"/>

    </LinearLayout>

</LinearLayout>

Answer 1

A＆amp; B ：android:background的格式为十六进制ARGB（alpha-red-green-blue），因此您目前所拥有的格式与#FFeeeeee相同，后者为完整的alpha和灰色。将FF（256）向下敲至00（0），它将完全透明。所以，是的，存在“不同程度的透明度”。

C＆amp; D ：我已经从你的content_main.xml中划分了所有填充和额外的内容，更改为RelativeLayout，我得到了这个。如果你想要不同的东西，请告诉我。我还添加了登录字段来演示RelativeLayout的布局锚定功能。

注意，您需要添加内容，例如xmlns:tools=...和tools:showIn="@layout/activity_main"

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:background="#fff"
        android:layout_width="match_parent"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_height="match_parent">


    <!-- Sign in Form -->
    <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="16dp"
            android:layout_alignParentTop="true">

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Username"
                android:labelFor="@id/edit_username"/>
        <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/edit_username"/>

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Password"
                android:labelFor="@id/edit_password"/>
        <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/edit_password"/>
    </LinearLayout>

    <!-- Button Bar -->
    <LinearLayout
            android:background="#77eeeeee"
            android:layout_width="match_parent"
            android:gravity="bottom"
            android:orientation="vertical"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true">

        <TextView
                android:text="Pick an action"
                android:layout_gravity="center_horizontal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

        <LinearLayout android:layout_width="match_parent"
                      android:id="@+id/registrationButtonRow"
                      android:layout_height="wrap_content">
            <Button
                    android:layout_height="wrap_content"
                    android:text="Join Free"
                    android:id="@+id/btn_register"
                    android:layout_width="wrap_content"
                    android:layout_weight="1"/>

            <Button
                    android:layout_height="wrap_content"
                    android:text="Sign In"
                    android:id="@+id/btn_sign_in"
                    android:layout_width="wrap_content"
                    android:layout_weight="1"/>

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

Answer 2

问题在于您将paddingTop的368dp用于LinearLyaout中的content_main。当您从垂直旋转到屏幕时，此填充将视图推出可见区域的一侧。您需要使用不同的布局调整横向模式的此填充，或者您可以使用其他答案中建议的RelativeLayout进行调整。

应用程序启动页面UI问题

2 个答案: