2011-08-04 179 views
0

我試圖深入理解Android佈局的工作原理。我有一個我想要創建的佈局,但我一直在創建它非常困難。我已經包含了代碼佈局以及代表我想創建的圖像http://tinypic.com/r/33258hx/7Android佈局幫助

我一直在努力與下面的佈局代碼,我不是在哪裏接近得到我的計劃。有人能請我提供可能有幫助的建議和/或參考嗎?謝謝。

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

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_gravity="center_horizontal" 
     android:layout_height="fill_parent"> 

    <ImageView 
     android:id="@+id/image1" 
     android:layout_width="wrap_content" 
     android:layout_height="fill_parent" 
     android:src="@drawable/image1" 
     android:scaleType="fitXY"> 
    </ImageView> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:scaleType="fitXY" 
       android:layout_gravity="center_vertical">    
      <ImageView 
       android:id="@+id/image2" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/image2" 
       android:scaleType="fitXY"> 
      </ImageView> 

      <ImageView 
       android:id="@+id/image3" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/image3" 
       android:scaleType="fitXY"> 
      </ImageView> 

      </LinearLayout> 

    </LinearLayout> 

    <RelativeLayout 
     android:orientation="horizontal" 
     android:layout_width="fill_parent" 
      android:layout_gravity="bottom" 
      android:layout_height="wrap_content"> 

    <TextView 
     android:id="@+id/text1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:textSize="15sp" 
     android:text="text1"/> 

    <ImageView 
     android:id="@+id/imageText1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:src="@drawable/ImageText1" 
     android:layout_above="@+id/text1" 
     android:scaleType="fitXY"/> 

      <ImageView 
       . . . 
       /> 

    <TextView 
     android:id="@+id/Text2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_toRightOf="@+id/Text1" 
     android:layout_above="@+id/ImageText2" 
     android:text="Text2" 
     android:paddingLeft="70px" 
     android:textSize="50sp"/> 

    <View android:id="@+id/divider" 
     android:background="@drawable/black_white_gradient" 
     android:layout_width="fill_parent" 
     android:layout_above="@id/current_kw" 
     android:layout_height="1dp"/> 

    <TextView 
     android:id="@+id/Text3" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:paddingLeft="30px" 
     android:layout_alignParentBottom="true" 
     android:layout_toRightOf="@+id/ImageText3" 
     android:textSize="15sp" 
     android:text="Text3"/> 

    <TextView 
     android:id="@+id/Text4" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:paddingLeft="30px" 
     android:layout_above="@+id/ImageText4" 
     android:layout_toRightOf="@+id/Text3" 
     android:textSize="50sp" 
     android:text="Text4"/> 

     ... 

    </RelativeLayout> 

</LinearLayout> 

回答

4

這裏是你想要的圖像& XML代碼,準確。我希望它會達到目的:

enter image description here

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:orientation="vertical"> 
<LinearLayout 
    android:layout_height="fill_parent" 
    android:id="@+id/linearLayout1" 
    android:layout_width="fill_parent" 
    android:layout_weight="0.25" 
    android:orientation="horizontal"> 
    <ImageView 
     android:layout_height="fill_parent" 
     android:src="@drawable/icon" 
     android:id="@+id/imageView1" 
     android:layout_width="fill_parent" 
     android:layout_weight="1.0"> 
    </ImageView> 
    <LinearLayout 
     android:layout_height="fill_parent" 
     android:id="@+id/linearLayout3" 
     android:layout_width="fill_parent" 
     android:orientation="vertical" 
     android:layout_weight="1.0"> 
     <ImageView 
      android:layout_height="fill_parent" 
      android:src="@drawable/icon" 
      android:id="@+id/imageView2" 
      android:layout_width="wrap_content" 
      android:layout_weight="1.0" 
      android:layout_gravity="center_horizontal"> 
     </ImageView> 
     <ImageView 
      android:layout_height="fill_parent" 
      android:src="@drawable/icon" 
      android:id="@+id/imageView3" 
      android:layout_width="wrap_content" 
      android:layout_weight="1.0" 
      android:layout_gravity="center_horizontal"> 
     </ImageView> 
     <ImageView 
      android:layout_height="fill_parent" 
      android:src="@drawable/icon" 
      android:id="@+id/imageView4" 
      android:layout_width="wrap_content" 
      android:layout_weight="1.0" 
      android:layout_gravity="center_horizontal"> 
     </ImageView> 
    </LinearLayout> 
</LinearLayout> 
<LinearLayout 
    android:layout_height="fill_parent" 
    android:id="@+id/linearLayout2" 
    android:layout_width="fill_parent" 
    android:layout_weight="0.75" 
    android:orientation="horizontal"> 
    <LinearLayout 
     android:layout_height="fill_parent" 
     android:layout_width="fill_parent" 
     android:layout_weight="1.0" 
     android:orientation="vertical"> 
     <ImageView 
      android:id="@+id/iv_img1" 
      android:layout_height="fill_parent" 
      android:layout_width="wrap_content" 
      android:layout_weight="1.0" 
      android:src="@drawable/icon" 
      android:layout_gravity="center_horizontal"/> 
     <TextView 
      android:layout_height="wrap_content" 
      android:layout_width="fill_parent" 
      android:text="text" 
      android:gravity="center_horizontal"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_height="fill_parent" 
     android:layout_width="fill_parent" 
     android:layout_weight="1.0" 
     android:orientation="vertical"> 
     <ImageView 
      android:id="@+id/iv_img1" 
      android:layout_height="fill_parent" 
      android:layout_width="wrap_content" 
      android:layout_weight="1.0" 
      android:src="@drawable/icon" 
      android:layout_gravity="center_horizontal"/> 
     <TextView 
      android:layout_height="wrap_content" 
      android:layout_width="fill_parent" 
      android:text="text" 
      android:gravity="center_horizontal"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_height="fill_parent" 
     android:layout_width="fill_parent" 
     android:layout_weight="1.0" 
     android:orientation="vertical"> 
     <ImageView 
      android:id="@+id/iv_img1" 
      android:layout_height="fill_parent" 
      android:layout_width="wrap_content" 
      android:layout_weight="1.0" 
      android:src="@drawable/icon" 
      android:layout_gravity="center_horizontal"/> 
     <TextView 
      android:layout_height="wrap_content" 
      android:layout_width="fill_parent" 
      android:text="text" 
      android:gravity="center_horizontal"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_height="fill_parent" 
     android:layout_width="fill_parent" 
     android:layout_weight="1.0" 
     android:orientation="vertical"> 
     <ImageView 
      android:id="@+id/iv_img1" 
      android:layout_height="fill_parent" 
      android:layout_width="wrap_content" 
      android:layout_weight="1.0" 
      android:src="@drawable/icon" 
      android:layout_gravity="center_horizontal"/> 
     <TextView 
      android:layout_height="wrap_content" 
      android:layout_width="fill_parent" 
      android:text="text" 
      android:gravity="center_horizontal"/> 
    </LinearLayout> 
</LinearLayout> 

+0

wahh ... dubara :-P – Noman

+0

這太棒了!謝謝! – user836200

+0

偉大的工作Khawar。比我做的要乾淨得多。 –

1

我有點玩弄你的代碼,並最終與下面。試一試,看看它是否讓你更接近。基本上我所做的是在Eclipse中使用圖形化的XML GUI,並做了一些調整。我也必須使圖像具有固定的大小。我通常知道我們不想這樣做,但我認爲你的形象會比我不得不合作的大。它沒有完全拋光,但更接近你正在尋找的東西。希望能幫助到你。

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_gravity="center_horizontal" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    > 

<ImageView 
    android:id="@+id/image1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/icon" 
    android:scaleType="fitXY" android:minHeight="175dp" android:minWidth="175dp"> 
</ImageView> 

     <LinearLayout 
     android:orientation="vertical" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:scaleType="fitXY" 
      android:layout_gravity="center_vertical"> 
     <ImageView android:src="@drawable/icon" android:scaleType="fitXY" 
     android:layout_height="wrap_content" android:layout_width="wrap_content" 
     android:id="@+id/image2" android:layout_alignParentLeft="true"> 
     </ImageView> 
     <ImageView 
      android:id="@+id/image3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/icon" 
      android:layout_below="@+id/image2" 
      android:scaleType="fitXY"> 
     </ImageView> 
     <ImageView 
      android:id="@+id/image4" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/icon" 
      android:layout_below="@+id/image3" 
      android:scaleType="fitXY"> 
     </ImageView> 

     </LinearLayout> 

</LinearLayout> 

<RelativeLayout 
    android:layout_width="fill_parent" 
     android:layout_gravity="bottom" 
     android:layout_height="wrap_content"> 


    <ImageView 
    android:id="@+id/image1bottom" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/icon" 
    android:scaleType="fitXY"/> 
    <ImageView 
    android:id="@+id/image2bottom" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/icon" 
    android:layout_toRightOf="@+id/image1bottom" 
    android:scaleType="fitXY"/> 
    <ImageView 
    android:id="@+id/image3bottom" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/icon" 
    android:layout_toRightOf="@+id/image2bottom" 
    android:scaleType="fitXY"/> 

<ImageView 
    android:id="@+id/image4bottom" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/icon" 
    android:layout_toRightOf="@+id/image3bottom" 
    android:scaleType="fitXY"/> 


     <TextView 
    android:id="@+id/Text1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_below="@+id/image1bottom" 
    android:layout_alignLeft="@id/image1bottom" 
    android:text="Text1"/> 
<TextView 
    android:id="@+id/Text2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_below="@id/image2bottom" 
    android:text="Text2" android:layout_toRightOf="@id/Text1" android:layout_alignLeft="@id/image2bottom"/> 

<TextView android:text="Text3" android:id="@+id/Text3" 
     android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
android:layout_toRightOf="@id/Text2" 
android:layout_below="@+id/image3bottom" android:autoText="false" android:layout_alignLeft="@id/image3bottom"/> 

<TextView 
    android:id="@+id/Text4" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_toRightOf="@id/Text3" 
android:layout_below="@+id/image4bottom" 
android:text="Text4" 
android:layout_centerHorizontal="true" android:layout_centerInParent="false" android:layout_alignLeft="@id/image4bottom"/> 

</RelativeLayout> 

喬治

+0

哇,謝謝!太棒了。我在佈局方面有更多的學習要做,這非常有幫助! – user836200