안드로이드의 이미지에서 다음과 같이 디자인하는 방법

Question

안드로이드에서 상대 레이아웃을 사용하여 다음 이미지를 디자인하는 방법. 나는 디자인을 좋아하지만 이미지와 같지 않고 수직 및 수평 분리 기호를 그리는 방법을 모른다. 그것은 안드로이드 전화 로그 화면뿐입니다.

가 일부 조정을 사용할 수 있지만 기본이 있습니다

Answer 1

다음 코드는이 결과를 제공합니다.

• 세퍼레이터는 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>