Android - 如何使文本字段居中对齐不同的Android设备

时间:2013-10-10 13:29:46

标签: android android-layout

我正在开发android应用程序。我是Android应用程序开发的新手。 我开始测试几个Android设备的应用程序。但是不同设备的布局看起来不同。我创建了屏幕截图供参考。Thes screen shot shows perfect layout for app design

There are some design issues with layout for Larger resolution devices

CODE:

<?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:background="@drawable/bgcopy"
android:orientation="vertical" >

<LinearLayout
    android:id="@+id/linearLayout1"
    style="@style/TitleBar" >

    <Button
        android:id="@+id/back"
        android:layout_width="60dp"
        android:layout_height="30dip"
        android:layout_marginLeft="7dip"
        android:background="@drawable/bround1"
        android:text="@string/back"
        android:textColor="@color/White"
        android:textStyle="bold" />

    <TextView
        style="@style/TitleBarText"
        android:gravity="center"
        android:text="@string/testApp"
        android:textSize="16dp" />

    <Button
        android:id="@+id/home"
        android:layout_width="60dip"
        android:layout_height="30dip"
        android:layout_marginRight="7dip"
        android:background="@drawable/bround1"
        android:text="@string/home"
        android:textColor="@color/White"
        android:textStyle="bold" />
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="1.5dp"
    android:background="@color/Black" >
</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignBottom="@+id/relativeLayout1"
    android:orientation="horizontal"
    android:background="@drawable/blackroundshape" 
    android:gravity="center">

    <TextView
        android:id="@+id/restrictions"
        android:layout_width="115dip"
        android:layout_height="54dip"
        android:layout_marginRight="0.5dip"
        android:layout_weight="1"
        android:background="@drawable/blackroundshape"
        android:gravity="center"
        android:layout_gravity="center"
        android:selectAllOnFocus="true"
        android:text="Details"
        android:textColor="@color/White"
        android:textSize="15dip"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/locations"
        android:layout_width="115dip"
        android:layout_height="54dip"
        android:layout_marginRight="0.5dip"
        android:layout_weight="1"
        android:background="@drawable/blackroundshape"
        android:gravity="center"
        android:layout_gravity="center"
        android:text="@string/locations"
        android:textColor="@color/White"
        android:textSize="15dip"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/news"
        android:layout_width="128dip"
        android:layout_height="54dip"
        android:layout_marginLeft="0.5dip"
        android:layout_weight="1"
        android:background="@drawable/blackroundshape"
        android:gravity="center"
        android:layout_gravity="center"
        android:selectAllOnFocus="true"
        android:text="@string/news"
        android:textColor="@color/White"
        android:textSize="15dip"
        android:textStyle="bold" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="60dp"        
    android:layout_below="@+id/linearLayout1"
    android:orientation="horizontal"
    android:background="@drawable/backbutton"
    android:gravity="center"  
    >

    <TextView
        android:id="@+id/reserve"
        android:layout_width="115dip"
        android:layout_height="58dip"
        android:layout_marginRight="0.5dip"
        android:layout_weight="1"
        android:background="@drawable/backbutton"
        android:gravity="center"
        android:layout_gravity="center"
        android:text="@string/reserve"
        android:textColor="@color/White"
        android:textSize="15dip"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/favorite"
        android:layout_width="115dip"
        android:layout_height="58dip"
        android:layout_marginRight="0.5dip"
        android:layout_weight="1"
        android:background="@drawable/backbutton"
        android:gravity="center"
        android:layout_gravity="center"
        android:text="@string/favorite"
        android:textColor="@color/White"
        android:textSize="15dip"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/share"
        android:layout_width="128dip"
        android:layout_height="58dip"
        android:layout_weight="1"
        android:background="@drawable/backbutton"
        android:gravity="center"
        android:layout_gravity="center"
        android:selectAllOnFocus="true"
        android:text="@string/share"
        android:textColor="@color/White"
        android:textSize="15dip"
        android:textStyle="bold" />
</LinearLayout>

<RelativeLayout
    android:id="@+id/relativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="504dp"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true" >

    <RelativeLayout
        android:id="@+id/relativeLayout2"
        android:layout_width="fill_parent"
        android:layout_height="170dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_margin="7dp"
        android:background="@drawable/round_transperent2" >

        <ImageView
            android:id="@+id/image"
            android:layout_width="110dp"
            android:layout_height="110dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="11dp"
            android:src="@drawable/default_ptr_rotate" />

        <TextView
            android:id="@+id/couponText"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/image"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="20dp"
            android:layout_toRightOf="@+id/image"
            android:text="TextView"
            android:textColor="@color/Black"
            android:typeface="serif" />

        <TextView
            android:id="@+id/save_textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/image"
            android:layout_below="@+id/image"
            android:layout_marginLeft="1dp"
            android:paddingLeft="1dp"
            android:text="@string/save"
            android:textColor="@color/mightyBlue"
            android:textSize="19sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/upto_textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/save_textView2"
            android:layout_alignBottom="@+id/save_textView2"
            android:layout_alignRight="@+id/image"
            android:layout_marginLeft="3dp"
            android:layout_toRightOf="@+id/save_textView2"
            android:text="@string/upto"
            android:textColor="@color/Gray" />

        <TextView
            android:id="@+id/amountDetails"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/save_textView2"
            android:layout_below="@+id/save_textView2"
            android:layout_marginBottom="4dp"
            android:paddingLeft="1dp"
            android:text="@string/amount"
            android:textColor="@color/mightyBlue"
            android:textSize="18sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/amountDetails"
            android:layout_alignLeft="@+id/couponText"
            android:text="Expires on:"
            android:textColor="@color/Black"
            android:typeface="serif"
            android:visibility="invisible" />

        <TextView
            android:id="@+id/expitydate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/amountDetails"
            android:layout_toRightOf="@+id/textView5"
            android:maxLength="10"                
            android:textColor="@color/Black" 
            />
    </RelativeLayout>

    <TextView
        android:id="@+id/RemainingDays_textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView7"
        android:layout_below="@+id/relativeLayout2"
        android:text="Remaning Days"
        android:textColor="@color/mightyBlue" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/RemainingDays_textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:gravity="center"
        android:text="@string/redeem"
        android:textColor="@color/Black"
        android:textSize="16dp"/>

    <TextView
        android:id="@+id/textView7"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView6"
        android:layout_below="@+id/textView6"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="3dp"
        android:gravity="center"
        android:text="@string/redeemnow"
        android:textColor="@color/Red"
        android:textSize="18dp" />

    <TextView
        android:id="@+id/YES"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_alignLeft="@+id/textView7"
        android:layout_below="@+id/textView7"
        android:layout_marginLeft="35dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/yellow_ball"
        android:gravity="center"
        android:text="YES"
        android:textColor="@color/Black"
        android:textSize="16dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/No"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_alignBaseline="@+id/YES"
        android:layout_alignBottom="@+id/YES"
        android:layout_alignRight="@+id/textView7"
        android:layout_marginRight="44dp"
        android:background="@drawable/yellow_ball"
        android:gravity="center"
        android:text="NO"
        android:textColor="@color/Black"
        android:textSize="16dp"
        android:textStyle="bold" />
</RelativeLayout>

第二个屏幕截图显示了该问题。我已完成应用程序的功能方面但由于此问题无法提交应用程序。任何帮助都会得到满足。

谢谢!!!

4 个答案:

答案 0 :(得分:1)

包含LinearLayout应该具有gravity = center以使TextView子项and android:layout_alignParentBottom="true"居中(我看到你有一个RelativeLayout作为父容器):

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

<LinearLayout
    android:id="@+id/navBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:gravity="center"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/restrictions"
        android:layout_width="115dip"
        android:layout_height="54dip"
        android:layout_gravity="center"
        android:layout_marginRight="0.5dip"
        android:layout_weight="1"
        android:gravity="center"
        android:selectAllOnFocus="true"
        android:text="Details"
        android:textSize="15dip"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/locations"
        android:layout_width="115dip"
        android:layout_height="54dip"
        android:layout_gravity="center"
        android:layout_marginRight="0.5dip"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Locations"
        android:textSize="15dip"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/news"
        android:layout_width="128dip"
        android:layout_height="54dip"
        android:layout_gravity="center"
        android:layout_marginLeft="0.5dip"
        android:layout_weight="1"
        android:gravity="center"
        android:selectAllOnFocus="true"
        android:text="news"
        android:textSize="15dip"
        android:textStyle="bold" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/navBar"
    android:gravity="center"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/restrictions"
        android:layout_width="115dip"
        android:layout_height="54dip"
        android:layout_gravity="center"
        android:layout_marginRight="0.5dip"
        android:layout_weight="1"
        android:gravity="center"
        android:selectAllOnFocus="true"
        android:text="Details"
        android:textSize="15dip"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/locations"
        android:layout_width="115dip"
        android:layout_height="54dip"
        android:layout_gravity="center"
        android:layout_marginRight="0.5dip"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Locations"
        android:textSize="15dip"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/news"
        android:layout_width="128dip"
        android:layout_height="54dip"
        android:layout_gravity="center"
        android:layout_marginLeft="0.5dip"
        android:layout_weight="1"
        android:gravity="center"
        android:selectAllOnFocus="true"
        android:text="news"
        android:textSize="15dip"
        android:textStyle="bold" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:gravity="center"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/restrictions"
        android:layout_width="115dip"
        android:layout_height="54dip"
        android:layout_gravity="center"
        android:layout_marginRight="0.5dip"
        android:layout_weight="1"
        android:gravity="center"
        android:selectAllOnFocus="true"
        android:text="Details"
        android:textSize="15dip"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/locations"
        android:layout_width="115dip"
        android:layout_height="54dip"
        android:layout_gravity="center"
        android:layout_marginRight="0.5dip"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Locations"
        android:textSize="15dip"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/news"
        android:layout_width="128dip"
        android:layout_height="54dip"
        android:layout_gravity="center"
        android:layout_marginLeft="0.5dip"
        android:layout_weight="1"
        android:gravity="center"
        android:selectAllOnFocus="true"
        android:text="news"
        android:textSize="15dip"
        android:textStyle="bold" />
</LinearLayout>

</RelativeLayout>

enter image description here

答案 1 :(得分:0)

为不同的屏幕尺寸添加了不同的布局?

参考:http://developer.android.com/guide/practices/screens_support.html

对于不同的屏幕尺寸,以下是应用程序中的资源目录列表,它为不同的屏幕尺寸和不同的位图绘图提供不同的布局设计,适用于小型,中型,高密度和超高密度屏幕。

res/layout/my_layout.xml             // layout for normal screen size ("default")
res/layout-small/my_layout.xml       // layout for small screen size
res/layout-large/my_layout.xml       // layout for large screen size
res/layout-xlarge/my_layout.xml      // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation

res/drawable-mdpi/my_icon.png        // bitmap for medium density
res/drawable-hdpi/my_icon.png        // bitmap for high density
res/drawable-xhdpi/my_icon.png       // bitmap for extra high density

Manifest中的以下代码支持所有dpis。

<supports-screens android:smallScreens="true" 
          android:normalScreens="true" 
          android:largeScreens="true"
          android:xlargeScreens="true"
          android:anyDensity="true" />

答案 2 :(得分:0)

试试这个,

使用layout_weight属性可以准确地说明这一点。

答案 3 :(得分:0)

仔细检查以确保您具有包含其他布局的正确布局的正确层次结构。对于“保留,收藏,分享”从顶部开始的第二个栏,在文本视图中使用权重为1的线性布局,并确保电视的宽度= 0dp。然后使用“详细信息,位置,新闻”创建底栏并将其对齐到底部。然后将中间白色部分作为布局,使用属性layout_below =“topbar”和layout_above =“bottombar”

这里有一些sudo代码可以给你一个想法

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

    <!-- Top Bar -->
    <LinearLayout
        andorid:name="@+id/nav_bar"
        android:layout_alignParentTop="true"
        android:layout_width=... />

    <!--  Second to Top Bar -->
    <LinearLayout
        android:name="@+id/reserve_bar"
        android:layout_width="fill_parent"
        android:layout_height="54dp"
        android:layout_below="@id/nav_bar"
        android:orientation="vertical" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" 
            ... />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" 
            ... />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" 
            ... />
    </LinearLayout>

    <!-- Very Bottom Bar -->
    <LinearLayout
        android:name="@+id/details_bar"
        android:layout_width="fill_parent"
        android:layout_height="54dp"
        android:layout_alignParentBottom="true"
        android:orientation="vertical" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" 
            ... />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" 
            ... />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" 
            ... />
    </LinearLayout>

    <!-- Body of the layout below 2nd bar and above bottom bar-->
    <RelativeLayout
        android:name="@+id/body_layout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/reserve_bar"
        android:layout_above="@id/detail_bar" >

        <RelativeLayout>
            android:stuff="..."
        </RelativeLayout>

    </RelativeLayout>

</RelativeLayout>

我认为问题在于你有一些不应该存在的事情的align_bottom属性。这些将覆盖alignParentBottom