Android中按比例显示的布局

来源：互联网发布：linux vi新建文件编辑：程序博客网时间：2024/06/06 00:08

布局的宽高按设置的比例展示 , 先给效果图:
这里写图片描述

自定义控件代码:

package com.eg.lyx.dateutil;import android.content.Context;import android.content.res.TypedArray;import android.util.AttributeSet;import android.widget.RelativeLayout;public class CtsRatioLayout extends RelativeLayout {    private int mProportion;  //宽和高的比例    public CtsRatioLayout(Context context) {        this(context, null);    }    public CtsRatioLayout(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public CtsRatioLayout(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        //获取比例值        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CtsRatioLayout);        mProportion = a.getInt(R.styleable.CtsRatioLayout_proportion, 11);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        setMeasuredDimension(getDefaultSize(0, widthMeasureSpec), getDefaultSize(0, heightMeasureSpec));        int childWidthSize = getMeasuredWidth();        int childHeightSize = getMeasuredHeight();        String s = "" + mProportion;        int width_pro = Integer.parseInt(s.substring(0, s.length() / 2));  //得到宽的比例        int height_pro = Integer.parseInt(s.substring(s.length() / 2));       //得到高的比例        widthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidthSize, MeasureSpec.EXACTLY);        /**按照比例改变高度值*/        heightMeasureSpec = MeasureSpec.makeMeasureSpec((int) (childWidthSize * height_pro * 1.0) / width_pro, MeasureSpec.EXACTLY);        super.onMeasure(widthMeasureSpec, heightMeasureSpec);    }}

attrs文件:

<?xml version="1.0" encoding="utf-8"?><resources xmlns:android="http://schemas.android.com/apk/res/android">    <declare-styleable name="CtsRatioLayout">        <attr name="proportion" format="integer">LYX</attr>    </declare-styleable></resources>

布局文件:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              xmlns:LYX="http://schemas.android.com/apk/res-auto"              android:id="@+id/liveStreamingView"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:orientation="vertical">    <!--直播标题begin-->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginLeft="20dp"        android:layout_marginRight="20dp"        android:layout_marginTop="25dp"        android:orientation="vertical">        <FrameLayout            android:layout_width="match_parent"            android:layout_height="wrap_content">            <TextView                android:id="@+id/ctsNoTripBestTv"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="top"                android:layout_marginTop="3dp"                android:background="@drawable/cts_rectangle_yellow"                android:paddingLeft="2dp"                android:paddingRight="2dp"                android:text="HOT"                android:textColor="@color/white"                android:textSize="13sp"                android:textStyle="bold"/>            <TextView                android:id="@+id/liveStreamingHeadTitleTv"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:ellipsize="end"                android:lineSpacingExtra="3dp"                android:maxLines="2"                android:text="旅行直播·足不出户看世界旅行直播·足不出户看世界"                android:textColor="#333333"                android:textSize="17sp"                android:textStyle="bold"/>        </FrameLayout>    </LinearLayout>    <!--直播标题end-->    <com.eg.lyx.dateutil.CtsRatioLayout        android:id="@+id/liveStreamingTwo"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginLeft="20dp"        android:layout_marginRight="20dp"        android:layout_marginTop="10dp"        android:layout_weight="1"        android:background="@drawable/two"        LYX:proportion="11">        <ImageView            android:id="@+id/liveStreamingPicTwoIv"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:scaleType="centerCrop"/>        <RelativeLayout            android:id="@+id/ctsNoTripLiveTwo"            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:gravity="center_vertical">            <RelativeLayout                android:layout_width="match_parent"                android:layout_height="50dp"                android:background="@drawable/cts_live_streaming_gradient_bg">                <ImageView                    android:id="@+id/ctsNoTripLocationIconTwo"                    android:layout_width="10dp"                    android:layout_height="10dp"                    android:layout_marginLeft="10dp"                    android:layout_marginTop="11dp"                    android:src="@drawable/cts_travel_plan_location_icon_two"/>                <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_marginLeft="5dp"                    android:layout_marginRight="5dp"                    android:layout_marginTop="8dp"                    android:layout_toRightOf="@+id/ctsNoTripLocationIconTwo"                    android:ellipsize="end"                    android:singleLine="true"                    android:text="珠海·最美不过天边云最美不过天边云"                    android:textColor="#FFFFFFFF"                    android:textSize="12sp"/>            </RelativeLayout>            <ImageView                android:layout_width="32dp"                android:layout_height="32dp"                android:layout_alignParentBottom="true"                android:layout_marginBottom="10dp"                android:layout_marginLeft="10dp"                android:src="@drawable/cts_travel_plan_play_icon"/>        </RelativeLayout>    </com.eg.lyx.dateutil.CtsRatioLayout></LinearLayout>

阅读全文

1 0