Android,如何在relativelayout中设置具有百分比的imageview

Ken*_*ett 26 user-interface android image

我想建立一个像这样的http://postimg.cc/image/fihidv1rv/的用户界面.这是我的xml代码,对于我的设计,我希望"EFFECT"和"CAMERA ImageView"在链接中像"SHOP"一样组合,所以总共会有5 ImageView秒,我设置了他们在链接

问题是,我如何设置高度和宽度百分比?

效果+ camrea:高度25%,宽度100%

拼贴:高度25%,宽度50%

绘制:高度25%,宽度50%

照片:身高50%,宽50%

店铺:高25%,宽100%

<RelativeLayout android:id="@+id/mainContent" android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:orientation="horizontal" android:background="#ffffff">
    <ImageView 
        android:id="@+id/img_effect+camera" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" 
        android:src="@drawable/a" />
    <ImageView 
        android:id="@+id/img_collage" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" 
        android:layout_below="@+id/img_effect+camera"
        android:src="@drawable/b" />
    <ImageView 
        android:id="@+id/img_draw" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/img_effect+camera" 
        android:layout_toRightOf="@+id/img_collage"
        android:src="@drawable/c" />
    <ImageView 
        android:id="@+id/img_photo" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@+id/img_collage"
        android:layout_below="@+id/img_draw"
        android:src="@drawable/d" />
    <ImageView 
        android:id="@+id/img_shop" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" 
        android:layout_below="@+id/img_photo"
        android:src="@drawable/e" />
</RelativeLayout>
Run Code Online (Sandbox Code Playgroud)

Eth*_*han 33

您可以考虑在布局http://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html#attr_android:layout_weight中使用android:layout_weight param

<LinearLayout android:id="@+id/mainContent" android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical" android:background="#ffffff">
<!-- height 25% -->
<LinearLayout
    android:layout_width="match_parent" 
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal">

    <ImageView 
        android:id="@+id/img_effect" 
        android:layout_width="0dp" 
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/a" />
    <ImageView 
        android:id="@+id/img_camera" 
        android:layout_width="0dp" 
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/a" />    
</LinearLayout>

<!-- height 50% -->
<LinearLayout
    android:layout_width="match_parent" 
    android:layout_height="0dp"
    android:layout_weight="2"
    android:orientation="horizontal">

    <!-- width 50% -->

    <LinearLayout
        android:layout_width="0dp" 
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <!-- height 50%% -->
        <ImageView 
            android:id="@+id/img_collage" 
            android:layout_width="match_parent" 
            android:layout_height="0dp"
            android:layout_weight="1"
            android:src="@drawable/a" />

        <!-- height 50%% -->    
        <ImageView 
            android:id="@+id/img_draw" 
            android:layout_width="match_parent" 
            android:layout_height="0dp"
            android:layout_weight="1"
            android:src="@drawable/a" />    
    </LinearLayout>   

    <!-- width 50% -->
    <ImageView 
        android:id="@+id/img_photo" 
        android:layout_width="0dp" 
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:src="@drawable/b" />
</LinearLayout>
<!-- height 25%% -->
<ImageView 
    android:id="@+id/img_shop" 
    android:layout_width="match_parent" 
    android:layout_height="0dp"
    android:layout_weight="1"
    android:src="@drawable/e" />
Run Code Online (Sandbox Code Playgroud)

  • 你应该在ImageView中查看android:scaleType param - http://developer.android.com/reference/android/widget/ImageView.ScaleType.html.玩所有可用选项,选择最适合您的选项.并且您总是有另一种选择:在传递给ImageView之前裁剪图像. (2认同)

Sre*_*ick 6

在Xml中很难,你可以通过代码做一些计算.怎么做:

  • 获取mainContent高度和宽度,这是您的父视图.
  • GetLayoutparams每个imageVIew,并通过计算百分比高度和宽度设置高度和宽度

示例代码:(在活动中)

final View parentView= findViewById(R.id.mainContent);
final ImageView effect_camera= (ImageView)findViewById(R.id.img_effect+camera);

effect_camera.post(new Runnable(){
  @Override
  public void run(){
   int height=parentView.getHeight();
   int width=parentView.getWidth();


   RelativeLayout.LayoutParams lp= (RelativeLayout.LayoutParams)effect_camera.getLayoutParams();
   int percentHeight=height*.25;
   int percentWidth= width*1;
   lp.height=percentHeight;
   lp.width=percentWidth;
   effect_camera.setLayoutParams(lp);
 }
});
Run Code Online (Sandbox Code Playgroud)

  • 注意这一点:如果将此代码放在onCreate方法中,则parentView.getHeight()和.getWidth()将返回0,因为尚未绘制视图. (4认同)