使我的佈局更好看

我找的設計，外觀和基於我現在有感覺的建議 - 這是醜陋： http://screencast.com/t/mjHawFeFnbRb 使我的佈局更好看

它基本上是一個ListView這樣： *

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" > 
    <TextView 
     android:id="@+id/textView1" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="10dp" 
     android:text="@string/news_name_placeholder" 
     android:layout_weight="3" 
     style="?android:attr/listSeparatorTextViewStyle" 
     android:textAppearance="?android:attr/textAppearanceMedium" /> 

    <TextView 
     android:id="@+id/textView2" 
     android:layout_width="0dp" 
     android:layout_marginTop="10dp" 
     android:layout_height="match_parent" 
     android:text="@string/news_date_placeholder"  
     android:gravity="right" 
     android:layout_weight="1" 
     style="?android:attr/listSeparatorTextViewStyle" 
     android:textAppearance="?android:attr/textAppearanceMedium" /> 
</LinearLayout>

這顯然很難看，所以我希望我能得到一些很好的想法，以便讓用戶更加愉快，並且讓它看起來很性感。

根據數據的不同，每一行可能會有所不同，所以無論我需要它們，還是以其他方式指示3種不同狀態（當前爲紅色，黃色，綠色）的傳入數據。

什麼我會稱這種類型的元素http://41.media.tumblr.com/91b9c05d7af1016675da74a7a232f39d/tumblr_mloupiH0gn1snfpwco1_400.png爲了搜索如何做到這一點？

希望這得到流動:) THX的設計思路

來源

2014-12-02 makapaka

不要使用會分散注意力的顏色......使用簡單的顏色和更有效的佈局 – 2014-12-02 07:04:44

嘗試改變顏色@布拉格的シ說簡單的意見，看看這裏：http://www.google.com/design/spec/style/color.html#color-ui-色彩應用 – JLONG 2014-12-02 07:12:40

即時通訊思想是這樣的：http://41.media.tumblr.com/91b9c05d7af1016675da74a7a232f39d/tumblr_mloupiH0gn1snfpwco1_400.png如果我能把在頂部包含的時間，而藍色部分的灰色部分有細節，我覺得那看起來不錯？任何人都可以建議如何做到這一點？ – makapaka 2014-12-02 07:29:09

我已經決定要從頭開始，您可以建立的東西，要達到（在截圖）所需的外觀很專業，將很難獲得/使源。

這就是我所知道的，改變文字顏色，使人眼流血，你可以在代表狀態的一面上有顏色（我猜這就是它）。

屏幕截圖1： 頂部欄固定在頂部，事件顯示在下面並顯示其相應的優先級/狀態。

Screenshot 1

截圖2： 頂欄停留在頂部，並允許您向下滾動到看到所有的事件。

Screenshot 2

activity_main.xml中

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="#F7C26D" 
android:paddingBottom="@dimen/activity_vertical_margin" 
android:paddingLeft="@dimen/activity_horizontal_margin" 
android:paddingRight="@dimen/activity_horizontal_margin" 
android:paddingTop="@dimen/activity_vertical_margin" 
tools:context="com.example.testdesignapp.MainActivity" 
android:orientation="vertical"> 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="10dp" 
    android:background="#eda737" 
    android:gravity="top" 
    android:orientation="horizontal" 
    android:padding="5dp" > 

    <TextView 
     android:id="@+id/textView1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:text="Top bar " /> 

    <TextView 
     android:id="@+id/textView2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:text="Non scrolling " /> 

    <TextView 
     android:id="@+id/textView3" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:text="If needed" /> 

</LinearLayout> 

<ScrollView 

    android:layout_width="match_parent" 
    android:layout_height="wrap_content" > 

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

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

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

      <TextView 
       android:id="@+id/textView4" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentTop="true" 
       android:layout_marginLeft="5dp" 
       android:layout_marginTop="10dp" 
       android:layout_toRightOf="@id/imageView1" 
       android:text="Spanish unemployment change 19:00" 
       android:textSize="13sp" /> 

      <TextView 
       android:id="@+id/textView5" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignLeft="@+id/textView4" 
       android:layout_below="@+id/textView4" 
       android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT." 
       android:textColor="#595959" 
       android:textSize="12sp" /> 

     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

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

      <TextView 
       android:id="@+id/textView6" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentTop="true" 
       android:layout_marginLeft="5dp" 
       android:layout_marginTop="10dp" 
       android:layout_toRightOf="@id/imageView2" 
       android:text="Spanish unemployment change 19:00" 
       android:textSize="13sp" /> 

      <TextView 
       android:id="@+id/textView7" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignLeft="@+id/textView6" 
       android:layout_below="@+id/textView6" 
       android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT." 
       android:textColor="#595959" 
       android:textSize="12sp" /> 

     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

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

      <TextView 
       android:id="@+id/textView8" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentTop="true" 
       android:layout_marginLeft="5dp" 
       android:layout_marginTop="10dp" 
       android:layout_toRightOf="@id/imageView3" 
       android:text="Spanish unemployment change 19:00" 
       android:textSize="13sp" /> 

      <TextView 
       android:id="@+id/textView9" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignLeft="@+id/textView8" 
       android:layout_below="@+id/textView8" 
       android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT." 
       android:textColor="#595959" 
       android:textSize="12sp" /> 

     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

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

      <TextView 
       android:id="@+id/textView10" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentTop="true" 
       android:layout_marginLeft="5dp" 
       android:layout_marginTop="10dp" 
       android:layout_toRightOf="@id/imageView4" 
       android:text="Spanish unemployment change 19:00" 
       android:textSize="13sp" /> 

      <TextView 
       android:id="@+id/textView11" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignLeft="@+id/textView10" 
       android:layout_below="@+id/textView10" 
       android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT." 
       android:textColor="#595959" 
       android:textSize="12sp" /> 

     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

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

      <TextView 
       android:id="@+id/textView12" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentTop="true" 
       android:layout_marginLeft="5dp" 
       android:layout_marginTop="10dp" 
       android:layout_toRightOf="@id/imageView5" 
       android:text="Spanish unemployment change 19:00" 
       android:textSize="13sp" /> 

      <TextView 
       android:id="@+id/textView13" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignLeft="@+id/textView12" 
       android:layout_below="@+id/textView12" 
       android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT." 
       android:textColor="#595959" 
       android:textSize="12sp" /> 

     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

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

      <TextView 
       android:id="@+id/textView14" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentTop="true" 
       android:layout_marginLeft="5dp" 
       android:layout_marginTop="10dp" 
       android:layout_toRightOf="@id/imageView7" 
       android:text="Spanish unemployment change 19:00" 
       android:textSize="13sp" /> 

      <TextView 
       android:id="@+id/textView15" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignLeft="@+id/textView14" 
       android:layout_below="@+id/textView14" 
       android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT." 
       android:textColor="#595959" 
       android:textSize="12sp" /> 

     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

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

      <TextView 
       android:id="@+id/textView16" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentTop="true" 
       android:layout_marginLeft="5dp" 
       android:layout_marginTop="10dp" 
       android:layout_toRightOf="@id/imageView8" 
       android:text="Spanish unemployment change 19:00" 
       android:textSize="13sp" /> 

      <TextView 
       android:id="@+id/textView17" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignLeft="@+id/textView16" 
       android:layout_below="@+id/textView16" 
       android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT." 
       android:textColor="#595959" 
       android:textSize="12sp" /> 

     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

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

      <TextView 
       android:id="@+id/textView18" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentTop="true" 
       android:layout_marginLeft="5dp" 
       android:layout_marginTop="10dp" 
       android:layout_toRightOf="@id/imageView9" 
       android:text="Spanish unemployment change 19:00" 
       android:textSize="13sp" /> 

      <TextView 
       android:id="@+id/textView19" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignLeft="@+id/textView18" 
       android:layout_below="@+id/textView18" 
       android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT." 
       android:textColor="#595959" 
       android:textSize="12sp" /> 

     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

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

      <TextView 
       android:id="@+id/textView20" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentTop="true" 
       android:layout_marginLeft="5dp" 
       android:layout_marginTop="10dp" 
       android:layout_toRightOf="@id/imageView10" 
       android:text="Spanish unemployment change 19:00" 
       android:textSize="13sp" /> 

      <TextView 
       android:id="@+id/textView21" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignLeft="@+id/textView20" 
       android:layout_below="@+id/textView20" 
       android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT." 
       android:textColor="#595959" 
       android:textSize="12sp" /> 

     </RelativeLayout> 

    </LinearLayout> 

</ScrollView>

我使用的3張圖像（綠色，黃色，紅色），您可以生成HERE

希望我幫助，祝你好運！ ;）

Markus

來源

2014-12-02 09:16:27 eeffoc

嘿，夥計，看起來太偉大，我很欣賞的代碼 – makapaka 2014-12-02 09:24:54

沒問題，希望您能利用它，或者至少:) – eeffoc 2014-12-02 09:29:26

我已經剝離出來受騙者的某些部分您的佈局，因爲我動態誇大他們的適配器，出於某種原因，當我這樣做（包括頭佈局），我發現了以下填充http://screencast.com/t/QURvBfmSyKla – makapaka 2014-12-02 11:28:39

選修兩LinearLayout中，而不是直接把左，右的TextView直接孩子，並設置重量，這可以顯示像左爲標籤和權值對數據：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:gravity="center"> 

    <LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="0.30"> 
     <TextView 
      android:id="@+id/textView1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/news_name_placeholder" 
      style="?android:attr/listSeparatorTextViewStyle" 
      android:textAppearance="?android:attr/textAppearanceMedium" /> 
     </LinearLayout> 
    <LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="0.70" 
     android:layout_marginLeft="5dp"> 
     <TextView 
      android:id="@+id/textView2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/news_date_placeholder" 
      style="?android:attr/listSeparatorTextViewStyle" 
      android:textAppearance="?android:attr/textAppearanceMedium" /> 
    </LinearLayout> 
</LinearLayout>

來源

2014-12-02 07:17:39

thx，這是一個好的開始，我也在尋找關於文本本身，字體，顏色，背景，特殊效果的建議嗎？任何可以幫助它看起來真的不錯，THX :) – makapaka 2014-12-02 07:23:49

將您的項目LinearLayout orientaltion更改爲垂直，因爲單行不足以放置您的信息。並且改變你的兩個TextView的文本大小，我認爲textView1必須大於textView2。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="vertical"> 
    <TextView 
     android:id="@+id/textView1" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="10dp" 
     android:text="@string/news_name_placeholder" 
     style="?android:attr/listSeparatorTextViewStyle" 
     android:textAppearance="?android:attr/textAppearanceMedium" /> 

    <TextView 
     android:id="@+id/textView2" 
     android:layout_width="match_parent" 
     android:layout_marginTop="5dp" 
     android:layout_height="wrap_content" 
     android:text="@string/news_date_placeholder"  
     android:gravity="left" 
     style="?android:attr/listSeparatorTextViewStyle" 
     android:textAppearance="?android:attr/textAppearanceSmall" /> 
</LinearLayout>

來源

2014-12-02 07:23:21

使我的佈局更好看

回答

相關問題