創建一個Android UI類似關鍵字計算器

Question

我需要創建一個佈局，類似於此：

我想在關鍵字部分相似的佈局。用戶可以輸入關鍵字。這些被添加到下面的文本框中。文本框允許的最大行數應該爲2.我可以在關鍵字部分添加儘可能多的文本，但它應該只顯示添加的最新關鍵字。第二行末尾的3個點應該會顯示與所有添加的標籤列表（現在不在範圍內）的對話。

請指導我如何得到這個。

Answer 1

根據我的經驗，對於基於菜單屏幕的這些類型的佈局，LinearLayout最適合。詳細瞭解它here。對於標籤佈局，我建議使用AndroidTagGroup，這是一個出色的庫。

你想要使用水平方向LinearLayout。這裏是我想出的，根據需要調整：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto"> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:paddingLeft="16dp" 
    android:paddingRight="16dp" 
    android:orientation="vertical"> 
    <TextView 
     android:paddingTop="25dp" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:text="Ordered By (Person)" 
     android:textStyle="bold" 
     android:textColor="#9e9e9e" 
     android:textAllCaps="true"/> 
    <EditText 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" /> 
    <TextView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:text="Filmed By" 
     android:textStyle="bold" 
     android:textColor="#9e9e9e" 
     android:textAllCaps="true"/> 
    <EditText 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" /> 
    <TextView 
     android:paddingTop="25dp" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:text="Keywords" 
     android:textStyle="bold" 
     android:textColor="#9e9e9e" 
     android:textAllCaps="true"/> 
    <me.gujun.android.taggroup.TagGroup 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"/> 
    <TextView 
     android:paddingTop="25dp" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:text="Description" 
     android:textStyle="bold" 
     android:textColor="#9e9e9e" 
     android:textAllCaps="true"/> 
    <EditText 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" /> 
</LinearLayout> 
    <android.support.design.widget.FloatingActionButton 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:src="@android:drawable/ic_input_add" 
     app:elevation="4dp" 
     app:fabSize="mini" 
     android:backgroundTint="#0026ff" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentRight="true" 
     android:layout_margin="20dp" 
     app:borderWidth="0dp"/> 
</RelativeLayout> 

Answer 2

我已經做了一些更改的UI和在這裏添加它@Faraz建議。

private EditText keywordEdtTxt; 
    private Button saveButn; 
    private LinearLayout line1Layout, line2Layout, tempLayout; 
    private int line1Width, line2Width, keywordWidth; 
    private TextView keywordTxt; 
    private ArrayList<TextView> remaningKeywords; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) 
    { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_home_screen); 

     tempLayout = (LinearLayout) findViewById(R.id.temp_layout); 

    line1Layout = (LinearLayout) findViewById(R.id.linear_layout_line1); 
    line1Layout.post(new Runnable() 
    { 
     @Override 
     public void run() 
     { 
      line1Width = line1Layout.getMeasuredWidth(); 
     } 
    }); 
    line2Layout = (LinearLayout) findViewById(R.id.linear_layout_line2); 
    line2Layout.post(new Runnable() 
    { 
     @Override 
     public void run() 
     { 
      line2Width = line2Layout.getMeasuredWidth(); 
     } 
    }); 

    keywordEdtTxt = (EditText) findViewById(R.id.keyword_txt); 

    saveButn = (Button) findViewById(R.id.save); 
    saveButn.setOnClickListener(new View.OnClickListener() 
    { 
     @Override 
     public void onClick(View view) 
     { 
      makeKeywordTxt(); 
     } 
    });  
    } 

private void makeKeywordTxt() 
{ 
    keywordEdtTxt.post(new Runnable() 
    { 
     @Override 
     public void run() 
     { 
      LinearLayout.LayoutParams linearLayoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, 50); 
      linearLayoutParams.setMargins(7, 0, 0, 0); // left, top, right, bottom 
      keywordTxt = new TextView(HomeScreen.this); 
      keywordTxt.setText(keywordEdtTxt.getText().toString()); 
      keywordTxt.setPadding(12, 0, 12, 0); 
      keywordTxt.setBackgroundColor(HomeScreen.this.getResources().getColor(R.color.gray_xxlight)); 
      keywordTxt.setTextColor(HomeScreen.this.getResources().getColor(R.color.list_value_text)); 
      keywordTxt.setMaxLines(1); 
      keywordTxt.setLayoutParams(linearLayoutParams); 

      //Add it to temp layout to get the width 
      tempLayout.addView(keywordTxt); 
      keywordTxt.post(new Runnable() 
      { 
       @Override 
       public void run() 
       { 
        keywordWidth = keywordTxt.getMeasuredWidth(); 
        tempLayout.removeAllViews(); 
        addKeyword(); 
       } 
      }); 
     } 
    }); 
} 

private void addKeyword() 
{ 
    if (line1Width - keywordWidth > 25) 
    { 
     line1Layout.addView(keywordTxt); 
     line1Width = line1Width - keywordWidth; 
    } 
    else if (line2Width - keywordWidth > 30) 
    { 
     line2Layout.addView(keywordTxt); 
     line2Width = line2Width - keywordWidth; 
    } 
    else 
    { 
     remaningKeywords.add(keywordTxt); 
    } 
} 

和XML文件

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:id="@+id/activity_home_screen" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
tools:context="com.aspiresys.facebookaccountkitpoc.HomeScreen"> 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_margin="15dp" 
    android:orientation="vertical"> 

    <LinearLayout 
     android:id="@+id/linear_layout_line1" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="5dp" 
     android:orientation="horizontal"/> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     android:clipToPadding="true"> 

     <LinearLayout 
      android:id="@+id/linear_layout_line2" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_margin="5dp" 
      android:layout_weight="1" 
      android:orientation="horizontal" 
      android:clipToPadding="true"/> 

     <ImageView 
      android:id="@+id/more" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/keyword_img"/> 

    </LinearLayout> 

</LinearLayout> 

<Button 
    android:id="@+id/save" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentStart="true" 
    android:layout_centerVertical="true" 
    android:background="@color/colorPrimary" 
    android:text="Save" 
    android:textColor="#FFFFFF"/> 

<EditText 
    android:id="@+id/keyword_txt" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentStart="true" 
    android:layout_marginTop="150dp" 
    android:ems="10"/> 

<LinearLayout 
    android:id="@+id/temp_layout" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentStart="true" 
    android:layout_below="@+id/save" 
    android:layout_marginTop="15dp" 
    android:orientation="horizontal" 
    android:visibility="invisible"/> 

</RelativeLayout>