2016-05-22 6 views
3

こんにちは、私はこのようなカウントダウンやろうとしています合わせのLinearLayout要素

enter image description here

はそれを行うには、私はのための2つの水平方向のLinearLayout、1を作りました「DAYS」や「HOURS」のようにラベルの下に配置されています。

私の目標は絵のように、数値の真ん中にラベルを揃えることですが、私はそれを行う方法がわからない、ここに私のコードです:

<!-- NUMERIC VALUES --> 
<LinearLayout 
    android:id="@+id/countdown_numbers" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="top|center" 
    android:orientation="horizontal"> 

    <TextView 
     android:id="@+id/days" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textAppearance="?attr/textAppearanceListItem" 
     android:drawablePadding="10dp" 
     android:textColor="@color/white" 
     android:text="00" 
     android:textSize="58sp" 
     android:fontFamily="sans-serif-regular" 
     android:layout_marginRight="9dp" 
     android:layout_marginBottom="30sp"/> 

    <TextView 
     android:id="@+id/hours" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textAppearance="?attr/textAppearanceListItem" 
     android:layout_toRightOf="@id/days" 
     android:drawablePadding="10dp" 
     android:textColor="@color/white" 
     android:text="00" 
     android:textSize="58sp" 
     android:fontFamily="sans-serif-regular" 
     android:paddingRight="@dimen/padding_countdown" 
     android:paddingLeft="@dimen/padding_countdown" 
     android:layout_marginRight="@dimen/margin_right"/> 

    <TextView 
     android:id="@+id/minutes" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textAppearance="?attr/textAppearanceListItem" 
     android:layout_toRightOf="@id/hours" 
     android:textColor="@color/white" 
     android:drawablePadding="10dp" 
     android:text="00" 
     android:textSize="58sp" 
     android:fontFamily="sans-serif-regular" 
     android:paddingRight="@dimen/padding_countdown" 
     android:paddingLeft="@dimen/padding_countdown" 
     android:layout_marginRight="@dimen/margin_right"/> 

    <TextView 
     android:id="@+id/seconds" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textAppearance="?attr/textAppearanceListItem" 
     android:layout_toRightOf="@id/hours" 
     android:textColor="@color/white" 
     android:drawablePadding="10dp" 
     android:text="00" 
     android:textSize="58sp" 
     android:fontFamily="sans-serif-regular" 
     android:paddingRight="@dimen/padding_countdown" 
     android:paddingLeft="@dimen/padding_countdown"/> 

</LinearLayout> 

<!-- LABELS --> 
<LinearLayout 
    android:id="@+id/countdown_label" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
    android:layout_below="@+id/countdown_numbers"> 

    <TextView 
     android:id="@+id/days_label" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textAppearance="?attr/textAppearanceListItem" 
     android:drawablePadding="10dp" 
     android:text="@string/days_label" 
     android:textColor="@color/white" 
     android:textSize="18sp" 
     android:fontFamily="sans-serif-regular" 
     android:layout_below="@+id/days" /> 

    <TextView 
     android:id="@+id/hours_label" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textAppearance="?attr/textAppearanceListItem" 
     android:drawablePadding="10dp" 
     android:text="@string/hours_label" 
     android:textColor="@color/white" 
     android:textSize="18sp" 
     android:fontFamily="sans-serif-regular" 
     android:gravity="center" 
     android:layout_below="@+id/hours" 
     android:layout_alignRight="@+id/hours" 
     android:layout_alignEnd="@+id/hours" 
     android:layout_toRightOf="@+id/days" 
     android:layout_toEndOf="@+id/days" /> 

    <TextView 
     android:id="@+id/minutes_label" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textAppearance="?attr/textAppearanceListItem" 
     android:drawablePadding="10dp" 
     android:text="@string/minutes_label" 
     android:textColor="@color/white" 
     android:textSize="18sp" 
     android:fontFamily="sans-serif-regular" 
     android:gravity="center" 
     android:layout_below="@+id/minutes" 
     android:layout_alignRight="@+id/minutes" 
     android:layout_alignEnd="@+id/minutes" 
     android:layout_toEndOf="@+id/hours" 
     android:layout_toRightOf="@+id/hours" /> 

    <TextView 
     android:id="@+id/seconds_label" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textAppearance="?attr/textAppearanceListItem" 
     android:drawablePadding="10dp" 
     android:text="@string/seconds_label" 
     android:textColor="@color/white" 
     android:textSize="18sp" 
     android:fontFamily="sans-serif-regular" 
     android:gravity="center" 
     android:layout_below="@+id/seconds" 
     android:layout_alignRight="@+id/seconds" 
     android:layout_alignEnd="@+id/seconds" 
     android:layout_toEndOf="@+id/minutes" 
     android:layout_toRightOf="@+id/minutes" /> 
</LinearLayout> 

しかし、それは動作しません。 、ラベルは数値の中央にはありません。

私を助けてもらえますか?

ありがとうございました!

答えて

2

これを実現するには、android:layout_weightを使用できます。

ここでは、あなたのケースについての彼の完全なxmlサンプルです。

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true" 
     android:orientation="horizontal"> 

     <RelativeLayout 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1"> 

      <TextView 
       android:id="@+id/txtDays" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_centerHorizontal="true" 
       android:text="22" /> 

      <TextView 
       android:id="@+id/txtDayText" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_below="@id/txtDays" 
       android:layout_centerHorizontal="true" 
       android:text="days" /> 
     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1"> 

      <TextView 
       android:id="@+id/txtHours" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_centerHorizontal="true" 
       android:text="20" /> 

      <TextView 
       android:id="@+id/txtHourText" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_below="@id/txtHours" 
       android:layout_centerHorizontal="true" 
       android:text="hour" /> 
     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1"> 

      <TextView 
       android:id="@+id/txtMinutes" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_centerHorizontal="true" 
       android:text="20" /> 

      <TextView 
       android:id="@+id/txtMinuteText" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_below="@id/txtMinutes" 
       android:layout_centerHorizontal="true" 
       android:text="minutes" /> 

     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1"> 

      <TextView 
       android:id="@+id/txtSeconds" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_centerHorizontal="true" 
       android:text="20" /> 

      <TextView 
       android:id="@+id/txtSecondsText" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_below="@id/txtSeconds" 
       android:layout_centerHorizontal="true" 
       android:text="seconds" /> 

     </RelativeLayout> 

    </LinearLayout> 
</RelativeLayout> 

スクリーンショット:

enter image description here

関連する問題