圣诞快乐--PercentFrameLayout的小Demo

最新推荐文章于 2022-12-16 16:15:17 发布

TechJene

最新推荐文章于 2022-12-16 16:15:17 发布

阅读量679

点赞数 1

分类专栏： Android《第一行代码》学习笔记文章标签： android android studio imageview 圣诞快乐

本文链接：https://blog.csdn.net/Yaoyuandemeili/article/details/53766737

版权

Android《第一行代码》学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

学习平台：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;
    }
}