自动图像缩放到Android布局内屏幕宽度的百分比

时间:2016-01-28 14:59:12

标签: android android-layout

我想重现以下布局。 enter image description here

但我无法正确再现红色矩形内的区域。代码到目前为止:

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

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:src="@drawable/graph_bg" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:gravity="center"
    android:orientation="horizontal">
    <View
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="0.13">
    </View>

    <LinearLayout
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="32dp"
        android:layout_marginBottom="32dp"
        android:layout_marginRight="8dp"
        android:orientation="vertical"
        android:background="@color/white"
        android:gravity="center"
        android:layout_weight="0.74">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerInside"
            android:src="@drawable/pic_mw_logo" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/calcs"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#000000" />
    </LinearLayout>
    <View
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="0.13">
    </View>

</LinearLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true">
    <TextView
        android:id="@+id/sponsored_descr"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:text="Sponsored by\nxxxx"/>
<!--- LOGOS HERE I SUPPOSE -->        

</RelativeLayout>

</RelativeLayout>

底部的两个徽标都是尺寸约为200x100像素的照片。我希望他们能够按比例缩放约15%的屏幕宽度,并在图片上显示

1 个答案:

答案 0 :(得分:0)

您始终可以使用ngRoute并设置空的angular.module('route', ['ngRoute']) // create new Angular Module 组件并为其提供LinearLayout属性。

如果您需要15%的屏幕尺寸,请将View的宽度设置为layout_weight,将LinearLayout设置为match_parent并为图片{{1 }} weightSum。确保将您必须填写的空白100设置为100。