圣诞快乐--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的实例

@Overrideprotected 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()方法获取新的图片

@Overridepublic 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

好，就这些！
送上这首圣诞快乐！
感谢阅读，谢谢！