2017-05-02 4 views
-4

Ich möchte diese Benutzeroberfläche erstellen.Ich möchte diese Benutzeroberfläche in Android erstellen. Ich bin nicht in der Lage, Layoutposition und Speicherplatz

Arbeit

enter image description here

Ich bin nicht in der Lage das Layout einstellen position.and Ich möchte Polsterung zwischen den Elementen geben, nach „Arbeit“ UI. Ich verwende lineares Layout. Wie zeichne einfache kurze Linie Sortierung, Filter und Herz-Symbol. Ich benutze View. Ich habe das getan.

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

    <LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_marginTop="20dp" 
    android:orientation="vertical"> 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:src="drawable/sort" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="SORT" 
     android:textStyle="bold" /> 

    </LinearLayout> 

    <View 
    android:layout_width="0dp" 
    android:layout_height="1dp" 
    android:layout_weight="1" 
    android:background="#706e6e" /> 

    <LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_marginTop="20dp" 
    android:orientation="horizontal"> 

     <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:src="drawable/filter" /> 

     <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="FILTER" 
     android:textStyle="bold" /> 

     <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/rect_red" 
     android:text="NEW" 
     android:textColor="#FFFFFF" 
     android:textSize="14dp" 
     android:textStyle="bold" /> 


    </LinearLayout> 
    <View 
    android:layout_width="0dp" 
    android:layout_height="1dp" 

    android:layout_weight="1" 
    android:background="#706e6e" /> 
    <LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_marginTop="20dp" 
    android:orientation="horizontal"> 


    <ImageView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="drawable/heart" /> 
    </LinearLayout> 

    </LinearLayout> 

rect_red.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <solid android:color="#ff0000"></solid> 
    <padding 
    android:bottom="10dp" 
    android:left="25dp" 
    android:right="25dp" 
    android:top="10dp"></padding> 
    </shape> 
+0

Ich würde vorschlagen, Sie jede Tutorial über android Layouts vor allem anderen folgen. Beachten Sie, dass Sie kein zusätzliches ImageView benötigen, da Sie eine Verbindung festlegen können, die in Ihrem TextView gezeichnet werden kann. Sie können eine 1 Pixel breite Ansicht für die Trennzeichen verwenden. –

Antwort

0

Hier ist die gewünschte csutom Layout. Versuchen Sie folgendes:

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

    <!-- Custom Layout --> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="48dp" 
     android:orientation="horizontal" 
     android:weightSum="5"> 

     <!-- SORT --> 
     <RelativeLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1.8"> 

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

       <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:src="@drawable/sort" /> 

       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="4dp" 
        android:text="SORT" 
        android:textStyle="bold" 
        android:textColor="#727272"/> 
      </LinearLayout> 
     </RelativeLayout> 

     <View 
      android:layout_width="0.5dp" 
      android:layout_height="match_parent" 
      android:layout_marginTop="4dp" 
      android:layout_marginBottom="4dp" 
      android:background="#706e6e" /> 

     <!-- FILTER --> 
     <RelativeLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="2.2"> 

      <LinearLayout 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:orientation="horizontal" 
       android:layout_centerVertical="true" 
       android:layout_alignParentRight="true" 
       android:layout_marginRight="16dp" 
       android:gravity="center_vertical"> 

       <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:src="@drawable/filter" /> 

       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="4dp" 
        android:text="FILTER" 
        android:textStyle="bold" 
        android:textColor="#727272" /> 

       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="16dp" 
        android:paddingLeft="4dp" 
        android:paddingRight="4dp" 
        android:paddingTop="2dp" 
        android:paddingBottom="2dp" 
        android:background="#ff0000" 
        android:text="NEW" 
        android:textColor="#FFFFFF" 
        android:textSize="10sp" 
        android:textStyle="normal" /> 
      </LinearLayout> 
     </RelativeLayout> 

     <View 
      android:layout_width="0.5dp" 
      android:layout_height="match_parent" 
      android:layout_marginTop="4dp" 
      android:layout_marginBottom="4dp" 
      android:background="#706e6e" /> 

     <!-- Favorite --> 
     <RelativeLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1"> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_centerInParent="true" 
       android:src="@drawable/heart" /> 
     </RelativeLayout> 
    </LinearLayout> 

</LinearLayout> 

FYI, können Sie icon ändern, text color und divider color nach Ihren Bedürfnissen und keine Notwendigkeit, rect_red.xml für red Hintergrund zu verwenden.

OUTPUT:

enter image description here

Hope this helfen ~

0
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="56dp" 
    android:orientation="horizontal" 
    android:background="#fff" 
    android:gravity="center_vertical" 
    android:weightSum="5" 
    android:padding="16dp"> 

    <LinearLayout 
     android:gravity="center_vertical" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="2"> 
     <ImageView 
      android:layout_marginRight="5dp" 
      android:src="@android:drawable/star_big_on" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 

     <TextView 
      android:text="SORT" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </LinearLayout> 

    <LinearLayout 
     android:gravity="center_vertical" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="2"> 

     <ImageView 
      android:layout_marginRight="5dp" 
      android:src="@android:drawable/star_big_on" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 

     <TextView 
      android:layout_marginRight="5dp" 
      android:text="FILTER" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 

     <TextView 
      android:background="@drawable/red_background" 
      android:text="New" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </LinearLayout> 

    <LinearLayout 
     android:gravity="center" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1"> 

     <ImageView 
      android:src="@android:drawable/star_big_on" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </LinearLayout> 


</LinearLayout><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="56dp" 
    android:orientation="horizontal" 
    android:background="#fff" 
    android:gravity="center_vertical" 
    android:weightSum="5" 
    android:padding="16dp"> 

    <LinearLayout 
     android:gravity="center_vertical" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="2"> 
     <ImageView 
      android:layout_marginRight="5dp" 
      android:src="@android:drawable/star_big_on" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 

     <TextView 
      android:text="SORT" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </LinearLayout> 

    <LinearLayout 
     android:gravity="center_vertical" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="2"> 

     <ImageView 
      android:layout_marginRight="5dp" 
      android:src="@android:drawable/star_big_on" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 

     <TextView 
      android:layout_marginRight="5dp" 
      android:text="FILTER" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 

     <TextView 
      android:background="@drawable/red_background" 
      android:text="New" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </LinearLayout> 

    <LinearLayout 
     android:gravity="center" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1"> 

     <ImageView 
      android:src="@android:drawable/star_big_on" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </LinearLayout> 


</LinearLayout> 
Verwandte Themen