自定义宽高比例的布局控件

前言

  在写AndroidUI界面的时候，一直比较让我头疼的是GridView控件。因为在写列表的时候，我希望比如说能有3列的内容，并且这三列是平分了屏幕宽度，宽度是平分了，但是高度该怎么办？高度能用match_parent吗，好像不太好吧，那wrap_content那不行，那就用一个具体的值吧–100dp,这就更不行了！！高度设置死了，但是宽度是没有设置死，这样的话出来的界面特别难看，所以我就希望能有一个控件，它能够自己设置宽和高的比例，不管宽度怎么变，高度始终随宽度变化，这样列表的Item就会是一致大小，看起来就很好了。

实现

  先给大家看一下没有使用其他控件只是一个ImageView的时候的界面效果，Item的布局文件如下：

  item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:scaleType="fitXY"
android:id="@+id/id_iv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>

然后再看一下GridView的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:id="@+id/gridview"
android:columnWidth="100dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:layout_width="match_parent"
android:layout_height="match_parent">
</GridView>
</RelativeLayout>

  通过stretchMode属性值来使得列表Item的宽度平分整个屏幕。

  我们先来看一下普通情况下的显示情况：



  大家别想成是照片墙了，这是因为我添加的图片是320*480和480*854的，而且是一个320*480下一个就是480*854来产生这种排列混乱的情况。因为图片大小不一样，所以而且ImageView的高度值是wrap_content，这就使得每个Item的高度大小就不一样了。当然有人说高度可以设置一个固定值啊，就用100dp，但是这样程序就写的太死了，这是不行的。

  说了这么多，那么该怎么解决这个问题呢？怎么能够使得高度随宽度变化呢？那就是我要拿出来的这个控件了，就随便起个名字吧“HWLayout”。

  作为自定义的控件，而且还要能够自定义宽和高的比例，那么就要用自定义属性了，传入宽和高的比例，然后在onMeasure方法中按照比例来改变高度值即可。

自定义属性文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="HWLayout">
<attr name="proportion" format="integer"></attr>
</declare-styleable>
</resources>

HWLayout.java

/**
* Created by 潘建成 on 2015/9/26.
* blog：http://blog.csdn.net/programchangesworld
*/
public class HWLayout extends RelativeLayout{
private int mProportion;  //宽和高的比例
public HWLayout(Context context){
this(context, null);
}

public HWLayout(Context context, AttributeSet attrs){
this(context, attrs, 0);
}

public HWLayout(Context context, AttributeSet attrs, int defStyle){
super(context, attrs, defStyle);
//获取比例值
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.HWLayout);
mProportion = a.getInt(R.styleable.HWLayout_proportion,
11);
}

@SuppressWarnings("unused")
@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);
}
}

  代码的实现比较简单，首先是自定义属性proportion，它表示宽和高的比例，这里我用如下的格式表示：“32”表示宽为3，高为2；”3248”表示宽为32，高为48。大家应该看出来了，我就不多说了。重头戏是onMeasure方法，MeasureSpec是测量宽和高的重要依据，通过makeMeasureSpec方法来得到宽度和高度。这个主要在View的绘制时会使用到。

heightMeasureSpec = MeasureSpec.makeMeasureSpec((int)(childWidthSize*height_pro*1.0)/width_pro, MeasureSpec.EXACTLY);

  这一行代码就可以使得高度随宽度的变化而变化，而且按照我们输入的宽和高的比例，大家可以仔细琢磨一下。

  下面是新的Item布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:hw="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.hwlayout.HWLayout
hw:proportion="23"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:scaleType="fitXY"
android:id="@+id/id_iv"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</com.example.hwlayout.HWLayout>
</LinearLayout>

  因为图片是320*480，也就是2:3的关系，而480*854也是差不多这个比例，我们就使用2:3，然后来看一下新的显示情况：



  很好看有木有，虽然有些图片稍微有些失真，但是比之前的好多了。

小结

  好了，这次就这样吧，这个控件还是挺实用的，在屏幕适配的时候也会用到，具体就看大家怎么使用了。

源码下载