人升开发日志#5 | 6/17 布局复用

我们之前做引导页的时候，是一个页面一个xml布局文件。

这些布局文件其实只有些许不同，只是加载的动画不同、TextView显示的文本不同，最后一页多了个按钮而已。

实际上，我们可以只用一个xml布局文件，然后在代码中实现各个页面的异化。

最终代码

public static class WelcomeFragment extends Fragment {

    private static final String ARG_SECTION_NUMBER = "section_number";
    private static final int[] arrAnimation =
            {R.raw.done, R.raw.animated_graph, R.raw.trophy, R.raw.floating_cloud};
    private static final int[] arrTitleText =
            {R.string.page1_title, R.string.page2_title, R.string.page3_title, R.string.page4_title};
    private static final int[] arrContentText =
            {R.string.page1_content, R.string.page2_content, R.string.page3_content, R.string.page4_content};
    protected boolean isCreate = false;
    private View rootView;


    public WelcomeFragment() {
    }

    /**
     * 创建 WelcomeFragment 实例
     *
     * @param sectionNumber 第几页
     * @return WelcomeFragment
     */
    public static WelcomeFragment newInstance(int sectionNumber) {
        WelcomeFragment fragment = new WelcomeFragment();
        Bundle args = new Bundle();
        args.putInt(ARG_SECTION_NUMBER, sectionNumber);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        LottieAnimationView animationViews = null;
        int iPage = getArguments().getInt(ARG_SECTION_NUMBER);

        //rootView = inflater.inflate(arrFragment[iPage], container, false);
        rootView = inflater.inflate(R.layout.fragment_welcome_page, container, false);

        //根据页面设置动画、文本、背景颜色
        animationViews = rootView.findViewById(R.id.animation_view);
        animationViews.setAnimation(arrAnimation[iPage], LottieAnimationView.CacheStrategy.None);
        TextView titleTextView = rootView.findViewById(R.id.title_text);
        titleTextView.setText(arrTitleText[iPage]);
        TextView contentTextView = rootView.findViewById(R.id.content_text);
        contentTextView.setText(arrContentText[iPage]);
        LinearLayout linearLayout = rootView.findViewById(R.id.linearLayout);
        linearLayout.setBackgroundColor(PAGE_COLOR[iPage]);


        Button button = rootView.findViewById(R.id.welcome_btn);


        //针对各个界面进行异化处理
        //第一个页面在创建后不会执行setUserVisibleHint方法，所以要手动播放动画。
        if (iPage == 0) {
            animationViews.setPadding(DensityUtil.dp2px(this.getContext(), 25), 0, 0, 0);
            animationViews.playAnimation();
        }

        if (iPage == 3) {
            titleTextView.setTextColor(0XFF000000);
            button.setVisibility(View.VISIBLE);
        } else {
            contentTextView.setTextColor(0XFFFFFFFF);
        }


        isCreate = true;
        return rootView;

    }
    ....
}

其实没什么好说的，就是找出各个要异化的View，然后进行异化（根据页面设置动画、文本、背景颜色）。

xml中的按钮默认隐藏，当为第四页的时候才设置为显示。

当然，xml的设置和代码有些不同。

这里有些坑：

代码中使用DP单位

添加一个工具类DensityUtil：

import android.content.Context;
import android.util.TypedValue;


public class DensityUtil {
    /**
     * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
     */
    public static int dp2px(Context context, float dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpVal, context.getResources().getDisplayMetrics());
    }

    /**
     * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
     */
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
}

在代码中使用默认Attr值

这个较为繁琐，我直接使用曲线救国的方法。

XML中默认使用这个attr数值，然后代码中异化其他数值。

如果要在代码中使用，可以参考以下文章：

http://solo.farbox.com/blog/how-to-get-value-of-attr-in-code

http://oliveexcel.iteye.com/blog/2227992