圣诞快乐--PercentFrameLayout的小Demo

学习平台：Android Studio2.2.3(基于win8.1 Pro)

ADT：Nexus 5

API ：24

《第一行代码》2th Edition的3.3.4 节讲到了百分比布局，郭老师用的是4个Button控件，不够好玩， 我用ImageView控件做了个有意思的Demo，还是先上效果图



哈哈，是的，你没有看错，Merry Christmas！

提前祝各位圣诞快乐！

主要用到了PercentFrameLayout。下面是步骤。

第一步：新建项目UILayoutDemo

New Project，主Activity和Layout默认即可。

或者布局命名为percent_frame_layout.

第二步：添加支持的Library

1. 打开app/build.gradle文件，在dependencies中添加percent支持。

或者手动添加Project Structure–>app–>dependencies。

compile ‘com.android.support:percent:25.1.0’

dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.1.0'
compile 'com.android.support:percent:25.1.0'
testCompile 'junit:junit:4.12'
compile 'com.android.support:design:25.1.0'
}

2.同步改变

修改gradle文件后，Android Studio会弹出Sync Now的提示，同步即可。

第三步：修改布局代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:id="@+id/percent_img1"
android:layout_gravity="left|top"
android:src="@drawable/front_01"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%" />

<ImageView
android:id="@+id/percent_img2"
android:layout_gravity="right|top"
android:src="@drawable/front_02"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%" />

<ImageView
android:id="@+id/percent_img3"
android:layout_gravity="right|bottom"
android:src="@drawable/front_04"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%" />

<ImageView
android:id="@+id/percent_img4"
android:layout_gravity="left|bottom"
android:src="@drawable/front_03"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%" />

</android.support.percent.PercentFrameLayout>

代码很基础，大家应该能看明白。

具体的代码解释请参考郭霖老师的《第一行代码》第二版3.3.4节。

第四步：修改主Activity

1. 定义Image按钮

private ImageView mImgButton1;
private ImageView mImgButton2;
private ImageView mImgButton3;
private ImageView mImgButton4;

2.通过findViewById()方法找到ImageView的实例

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.percent_frame_layout);

mImgButton1 = (ImageView) findViewById(R.id.percent_img1);
mImgButton1.setOnClickListener(this);

mImgButton2 = (ImageView) findViewById(R.id.percent_img2);
mImgButton2.setOnClickListener(this);

mImgButton3 = (ImageView) findViewById(R.id.percent_img3);
mImgButton3.setOnClickListener(this);

mImgButton4 = (ImageView) findViewById(R.id.percent_img4);
mImgButton4.setOnClickListener(this);

}

3.调用setImageResource()方法获取新的图片

@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.percent_img1:
mImgButton1.setImageResource(R.drawable.tree_01);
break;
case R.id.percent_img2:
mImgButton2.setImageResource(R.drawable.tree_02);
break;
case R.id.percent_img3:
mImgButton3.setImageResource(R.drawable.tree_04);
break;
case R.id.percent_img4:
mImgButton4.setImageResource(R.drawable.tree_03);
break;
default:
break;
}
}

第五步：运行&enjoy



说明：

1. 夕阳图是我拍的学校的稷下湖；

2. 圣诞快乐图来自free图片共享网站：FREEIMAGES

好，就这些！

送上这首圣诞快乐！

感谢阅读，谢谢！