【0093】【项目实战】-【谷歌电子市场】-【05】【应用详情页-截图模块开发】【应用详情页-描述模块开发】【自定义排行控件的实现】【Actionbar的使用】

1.应用详情页-截图模块开发

1.1 效果及思路

【思路】可以左右滑动，但是不会根据滑动的位置自动的更改位置；

 使用水平的srollerView，然后将图片添加进去即可；

1.

1.2 截图的布局

【布局】直接使用HorizontalScrollView容器布局，直接填充图片即可；

1.3.初始化布局

【初始化布局】需要使用一个Holder初始化布局；

【布局文件】准备5个ImageView，虽然有的页面达不到5个，但是也应该准备好；

【源码】/GooglePlay74/res/layout/layout_detail_picinfo.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="wrap_content"
    android:paddingTop="3dp"
    android:paddingBottom="3dp"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/iv_pic1"
        android:layout_width="90dp"
        android:layout_height="150dp"
        android:layout_marginLeft="3dp" />

    <ImageView
        android:id="@+id/iv_pic2"
        android:layout_width="90dp"
        android:layout_height="150dp"
        android:layout_marginLeft="3dp" />

    <ImageView
        android:id="@+id/iv_pic3"
        android:layout_width="90dp"
        android:layout_height="150dp"
        android:layout_marginLeft="3dp" />

    <ImageView
        android:id="@+id/iv_pic4"
        android:layout_width="90dp"
        android:layout_height="150dp"
        android:layout_marginLeft="3dp" />

    <ImageView
        android:id="@+id/iv_pic5"
        android:layout_width="90dp"
        android:layout_height="150dp"
        android:layout_marginLeft="3dp" />

</LinearLayout>

 【注意】正确的写法是在initView中写；因为继承在父类中，首先会调用父类的构造方法，然后调用initView()；写在外面会导致错误，编译挂掉；

 

【源码】/GooglePlay74/src/com/itheima/googleplay74/ui/holder/DetailPicsHolder.java

package com.itheima.googleplay74.ui.holder;

import java.util.ArrayList;

import android.content.Intent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;

import com.itheima.googleplay74.R;
import com.itheima.googleplay74.domain.AppInfo;
import com.itheima.googleplay74.http.HttpHelper;
import com.itheima.googleplay74.utils.BitmapHelper;
import com.itheima.googleplay74.utils.UIUtils;
import com.lidroid.xutils.BitmapUtils;

/**
 * 首页详情页-截图
 * 
 * @author Kevin
 * @date 2015-11-3
 */
public class DetailPicsHolder extends BaseHolder<AppInfo> {

    private ImageView[] ivPics;
    private BitmapUtils mBitmapUtils;

    @Override
    public View initView() {
        View view = UIUtils.inflate(R.layout.layout_detail_picinfo);

        ivPics = new ImageView[5];
        ivPics[0] = (ImageView) view.findViewById(R.id.iv_pic1);
        ivPics[1] = (ImageView) view.findViewById(R.id.iv_pic2);
        ivPics[2] = (ImageView) view.findViewById(R.id.iv_pic3);
        ivPics[3] = (ImageView) view.findViewById(R.id.iv_pic4);
        ivPics[4] = (ImageView) view.findViewById(R.id.iv_pic5);

        mBitmapUtils = BitmapHelper.getBitmapUtils();

        return view;
    }

    @Override
    public void refreshView(AppInfo data) {
        final ArrayList<String> screen = data.screen;

        for (int i = 0; i < 5; i++) {
            if (i < screen.size()) {
                mBitmapUtils.display(ivPics[i], HttpHelper.URL + "image?name="
                        + screen.get(i));
            } else {
                ivPics[i].setVisibility(View.GONE);
            }
        }

    }

}

 【应用详情中调用此Holder】填充不同的应用详情的界面的数据；

 

【BUG】签名一致，先删除安装的应用程序；

 

 

【中间的图片的点击查看大图】

【思路】为图片增加点击事件的监听，然后跳转到另外一个Activity，在Activity中使用类似于首页新闻头条的滑动效果，但是需要在跳转的时候传递数据（要加载图片的集合screen和该位置的图片（i））；

 此处没有实现；

2.应用详情页-描述模块开发

2.1 效果及思路

【思路】就是TextView的组合；

2.2【添加框架中的帧布局】

【初始化布局的数据】

2.3【Hodler的添加】

[描述的布局源码]

<?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"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="应用介绍"
        android:textColor="#9e9e9e"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/tv_detail_des"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#9e9e9e"
        android:textSize="14sp" />

    <RelativeLayout
        android:id="@+id/rl_detail_toggle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/tv_detail_author"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:textColor="#000"
            android:textSize="14sp" />

        <ImageView
            android:id="@+id/iv_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/arrow_down" />
    </RelativeLayout>

</LinearLayout>

 [现阶段的部分源码]

package com.itheima.googleplay74.ui.holder;

import android.util.TypedValue;
import android.view.View;
import android.view.View.MeasureSpec;
import android.view.View.OnClickListener;
import android.view.ViewParent;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.ScrollView;
import android.widget.TextView;

import com.itheima.googleplay74.R;
import com.itheima.googleplay74.domain.AppInfo;
import com.itheima.googleplay74.utils.UIUtils;
import com.nineoldandroids.animation.Animator;
import com.nineoldandroids.animation.Animator.AnimatorListener;
import com.nineoldandroids.animation.ValueAnimator;
import com.nineoldandroids.animation.ValueAnimator.AnimatorUpdateListener;

/**
 * 详情页-应用描述
 * 
 * @author Kevin
 * @date 2015-11-3
 */
public class DetailDesHolder extends BaseHolder<AppInfo> {

    private TextView tvDes;
    private TextView tvAuthor;
    private ImageView ivArrow;
    private RelativeLayout rlToggle;

    @Override
    public View initView() {
        View view = UIUtils.inflate(R.layout.layout_detail_desinfo);

        tvDes = (TextView) view.findViewById(R.id.tv_detail_des);
        tvAuthor = (TextView) view.findViewById(R.id.tv_detail_author);
        
        return view;
    }

    @Override
    public void refreshView(AppInfo data) {
        tvDes.setText(data.des);
        tvAuthor.setText(data.author);

        });
    }

 【初始化描述的模块的完善】设置数据；

【测试】无法滑动，因为现在是线性布局，应该添加scrllView布局进行包括，就可以滑动了；

2.4【布局中添加scrollView】

【测试2】并非要完成显示所有的文字内容，而是只展示7行的内容；通过点击箭头进行切换完整内容的显示；

【效果】并非要完成显示所有的文字内容，而是只展示7行的内容；通过点击箭头进行切换完整内容的显示；

 

2.5 文件的部分显示

【思路】模拟七行的TextView的高度,然后将文字的高度进行测量然后设置。

【设置默认的TextView的高度】

【测试3】展示七行的效果

【增加文字的边距】

 

2.5 增加点击文本显示展开和收起的效果

【注意】要判断描述信息大于7行的时候才启动点击效果

【测试4】达到点击展开的效果，但是还需要点击之后文字自动全部显示；

 

2.6 点击之后文字自动全部显示

【思路】在接收点击事件之后scrollView自动展开内容；

【scrollView的查找】scrollView是在整个大布局中，而在详情描述并没有该scrollView；此控件的查找有两种思路；

【思路1】通过构造方法传递该参数；

【思路2】详情描述的控件的祖先必然存在scrollView，可以一级级的查找，本次使用该方法；

【查找scrollView的源码】

【滚动动作】在动画结束之后进行滚动；

 【增加箭头的切换】

【BUG】本身文字的高度不到7行，现在显示的还是7行，产生了空白；

[原因]系统也是需要事件缓冲的，直接运行无法直接响应；

[测试效果]展示3行了；

=====自定义排行控件=======

3.自定义排行控件原理分析

 

【分析】会出现的几种情况

4.自定义排行控件的onMeasure测量

【获取有效宽高/测量子控件的宽度】

 

4.1 第一种情况：增加子控件超边界需要换行 

【对已经占据的宽度记录判断】

【水平控件之间的间距】

【超出边界与否的判断】

【换行对象】

【为当前行增加子控件】

【换行类生成】

【增加换行功能】第一个情况解决；

4.2 超出边界的考虑

【超出边界的考虑】

 

【获取孩子的数量】

【超出边界的分类】

【第三种情况的处理】控件很长，强制添加，然后换行；属于else的情况1；

【第二种情况的处理】先换行，再添加，宽度累计增加；

【将最后一行的数据添加后集合中】在newLine中保存的是上一行的数据，在for循环结束之后，最后一行的控件可能无法添加；

【根据尺寸重新绘制】

【onMeasure方法源码】

package com.itheima.googleplay74.ui.view;

import java.util.ArrayList;

import com.itheima.googleplay74.utils.UIUtils;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

public class MyFlowLayout extends ViewGroup {

    private int mUsedWidth;// 当前行已使用的宽度
    private int mHorizontalSpacing = UIUtils.dip2px(6);// 水平间距
    private int mVerticalSpacing = UIUtils.dip2px(8);// 竖直间距

    private Line mLine;// 当前行对象

    private ArrayList<Line> mLineList = new ArrayList<MyFlowLayout.Line>();// 维护所有行的集合

    private static final int MAX_LINE = 100;// 最大行数是100行

    public MyFlowLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public MyFlowLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyFlowLayout(Context context) {
        super(context);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 获取有效宽度
        int width = MeasureSpec.getSize(widthMeasureSpec) - getPaddingLeft()
                - getPaddingRight();
        // 获取有效高度
        int height = MeasureSpec.getSize(heightMeasureSpec) - getPaddingTop()
                - getPaddingBottom();

        // 获取宽高模式
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int childCount = getChildCount();// 获取所有子控件数量
        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);

            // 如果父控件是确定模式, 子控件包裹内容;否则子控件模式和父控件一致
            int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(width,
                    (widthMode == MeasureSpec.EXACTLY) ? MeasureSpec.AT_MOST
                            : widthMode);
            int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(height,
                    (heightMode == MeasureSpec.EXACTLY) ? MeasureSpec.AT_MOST
                            : heightMode);

            // 开始测量
            childView.measure(childWidthMeasureSpec, childHeightMeasureSpec);

            // 如果当前行对象为空, 初始化一个行对象
            if (mLine == null) {
                mLine = new Line();
            }

            // 获取子控件宽度
            int childWidth = childView.getMeasuredWidth();

            mUsedWidth += childWidth;// 已使用宽度增加一个子控件宽度

            if (mUsedWidth < width) {// 判断是否超出了边界
                mLine.addView(childView);// 更当前行对象添加子控件

                mUsedWidth += mHorizontalSpacing;// 增加一个水平间距

                if (mUsedWidth > width) {
                    // 增加水平间距之后, 就超出了边界, 此时需要换行
                    if (!newLine()) {
                        break;// 如果创建行失败,就结束循环,不再添加
                    }
                }

            } else {
                // 已超出边界
                // 1.当前没有任何控件, 一旦添加当前子控件, 就超出边界(子控件很长)
                if (mLine.getChildCount() == 0) {
                    mLine.addView(childView);// 强制添加到当前行

                    if (!newLine()) {// 换行
                        break;
                    }
                } else {
                    // 2.当前有控件, 一旦添加, 超出边界
                    if (!newLine()) {// 换行
                        break;
                    }

                    mLine.addView(childView);
                    mUsedWidth += childWidth + mHorizontalSpacing;// 更新已使用宽度
                }
            }

        }

        // 保存最后一行的行对象
        if (mLine != null && mLine.getChildCount() != 0
                && !mLineList.contains(mLine)) {
            mLineList.add(mLine);
        }

        int totalWidth = MeasureSpec.getSize(widthMeasureSpec);// 控件整体宽度

        int totalHeight = 0;// 控件整体高度
        for (int i = 0; i < mLineList.size(); i++) {
            Line line = mLineList.get(i);
            totalHeight += line.mMaxHeight;
        }

        totalHeight += (mLineList.size() - 1) * mVerticalSpacing;// 增加竖直间距
        totalHeight += getPaddingTop() + getPaddingBottom();// 增加上下边距

        // 根据最新的宽高来测量整体布局的大小
        setMeasuredDimension(totalWidth, totalHeight);
        // super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    // 换行
    private boolean newLine() {
        mLineList.add(mLine);// 保存上一行数据

        if (mLineList.size() < MAX_LINE) {
            // 可以继续添加
            mLine = new Line();
            mUsedWidth = 0;// 已使用宽度清零

            return true;// 创建行成功
        }

        return false;// 创建行失败
    }

    // 每一行的对象封装
    class Line {

        private int mTotalWidth;// 当前所有控件总宽度
        public int mMaxHeight;// 当前控件的高度(以最高的控件为准)

        private ArrayList<View> mChildViewList = new ArrayList<View>();// 当前行所有子控件集合

        // 添加一个子控件
        public void addView(View view) {
            mChildViewList.add(view);
            // 总宽度增加
            mTotalWidth += view.getMeasuredWidth();

            int height = view.getMeasuredHeight();
            // 0 10 20 10
            mMaxHeight = mMaxHeight < height ? height : mMaxHeight;
        }

        public int getChildCount() {
            return mChildViewList.size();
        }

 5.自定义排行控件的onLayout布局

【思路】每一行的对象控制好各自各行的小控件，然后在Activity中控制好每一行；

5.1 每行的子控件的位置的布局

【说明】需要知道每个子控件的左上角的坐标（left，top），然后子控件知道自己的宽高，就可以画出来了；

【存在剩余空间的情况】【需要考虑的特殊情况】最后黄色布局剩余了空间；

【修改】需要改为确定的值；

 

【控件高度不一致的情况的画法】

【考虑第二个控件的横向尺寸值】增加前一个控件的横向尺寸值和一个横向的边距值；

【出现负值的情况】

5.2 大布局中的每行的排列

 【修改使用到项目中】

【测试】效果与之前的一致；

 6.Actionbar的使用

 

6.1 对应的加载布局

6.2 属性值的含义

【orderInCategory】当前的item属于的级别，可能存在多个item，各有级别；

【showAsaction】展现的方式

[always]一直展现出来；

[never]永远都是隐藏，需要点击才会显示出来；

 

[ifroom]如果空间容许的话就展现；

6.3 展示图片

 

【长按可以弹出土司】可以通过长按点击可以判断是否为ActionBar开发的；微信的搜索按钮可以长按弹吐司；

【ActionBar的点击事件处理】

 

【修改标题】

【设置图标】

【设置图标是否可以被点击】true：可以被点击；false：不可以被点击；

 【隐藏图标】

 【显示返回键】

【返回按键的事件响应】

7.使用Actionbar改造电子市场&侧边栏效果DrawerLayout

7.1 效果及思路

【思路】点击按钮之后会出现侧边栏，侧边栏使用的是另外一种方式，谷歌原生的效果，DrawerLayout；

 

7.2 侧边栏的构造

【说明】使用下面的谷歌提供的DrawerLayout侧边栏效果的控件；

【谷歌提供的DrawerLayout侧边栏效果的控件】类似于帧布局，将侧边栏和内容页重叠在了一起；

 

【初始化抽屉数据】

【该方法调用的时机】

【拦截点击图标的事件】

【在详情页面添加返回键】

7.3 点评ActionBar

 【开源中国中使用的比较多】

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 2.