2012-03-13 6 views
0

アンドロイドで以下の画像を相対レイアウトでデザインするにはどうすればいいですか?私のようなデザインでしたが、それはイメージのようではないと私は垂直と水平のセパレータを描画する方法を知らない。それはアンドロイド通話ログ画面だけです。アンドロイドの画像で次のようにデザインする方法

enter image description here

答えて

1

次のコードは、この結果を与える:
screenshot
は、いくつかの調整を使用することができますが、基本はあります。

  • セパレータは、1ピクセルの(向きに に応じて、または高さ)幅Viewオブジェクトです。
  • 小緑色の矢印( の四角で表される)は、 の数字を表示するTextViewに属するCompound Drawableです。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 
    <TextView 
     android:id="@+id/number" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:drawableLeft="@drawable/smallsquare" 
     android:drawablePadding="8dp" 
     android:text="1-234-567-890" 
     android:textColor="#FFFF" 
     android:textSize="20sp" 
     android:textStyle="bold"/> 
    <TextView 
     android:id="@+id/time" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="3dp" 
     android:layout_toLeftOf="@+id/separator_vert" 
     android:text="13 mins ago" 
     android:layout_below="@+id/number"/> 
    <View 
     android:id="@+id/separator_vert" 
     android:layout_width="1px" 
     android:layout_height="0dp" 
     android:layout_margin="2dp" 
     android:layout_alignParentTop="true" 
     android:layout_toLeftOf="@+id/phoneicon" 
     android:layout_above="@+id/separator_horz" 
     android:background="#FFAAAAAA"/> 
    <View 
     android:id="@+id/separator_horz" 
     android:layout_width="0dp" 
     android:layout_height="1px"  android:layout_margin="2dp" 
     android:layout_below="@+id/time" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentRight="true" 
     android:background="#FFAAAAAA"/> 
    <ImageView 
     android:id="@+id/phoneicon" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:layout_margin="5dp" 
     android:src="@drawable/mediumsquare"/> </RelativeLayout> 
+0

おかげでこれは私がデザインしたいものです。ありがとう –

関連する問題