码迷,mamicode.com
首页 > 移动开发 > 详细

我的长大app开发教程第二弹:完成ContentFragment底部按钮

时间:2017-12-10 18:56:04      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:flat   解决   http   下载   find   nta   size   contex   appcompat   

在开始之前,先上一张效果图

技术分享图片

突然发现有点知乎的味道。。。的确。。知乎灰#989898,知乎蓝15,136,235(逃。。。。

1、学P图

想我大一的时候也用过不少Adobe的软件,昨天重新打开我的Photoshop,电脑提示缺少什么.dll文件,最后弄了一上午,是因为vc2012的运行库出了问题,最后发现一个软件特别好用:DirectX Repair,可以完美解决.dll丢失的问题。

UI素材我是在google的icons素材库下载的https://github.com/google/material-design-icons

图片变换颜色用到了Photoshop的油漆桶工具

这里每个按钮需要两种颜色,点击时可以达到变换的效果

技术分享图片

最后还需要一个可以在页面底部放四个button的图片

技术分享图片

最后把这些图片放进drawable-hdpi

2、ContentFragment中绑定控件

package com.vitoyan.myangtzeu.fragment;

import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.RadioGroup;

import com.vitoyan.myangtzeu.R;
import com.vitoyan.myangtzeu.base.BaseFragment;
import com.vitoyan.myangtzeu.utils.LogUtil;

/**
 * 作者:Vito-Yan
 * 作用:正文Fragment
 */
public class ContentFragment extends BaseFragment {

    private ViewPager viewpager;
    private RadioGroup rg_main;

    @Override
    public View initView() {
        LogUtil.e("正文视图被初始化了");
        View view = View.inflate(context, R.layout.content_fragment,null);
        viewpager = view.findViewById(R.id.viewpager);
        rg_main = view.findViewById(R.id.rg_main);
        return view;
    }

    @Override
    public void initData() {
        super.initData();
        LogUtil.e("正文数据被初始化了");

        //设置默认选中首页
        rg_main.check(R.id.rb_home);
    }

}

2、content_fragment.xml是底部按钮的布局文件,在线性布局中包裹RadioGroup,RadioGroup中包裹四个button

<?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">

    <com.vitoyan.myangtzeu.view.NoScrollViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <RadioGroup
        android:id="@+id/rg_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom_tab_bg"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_home"
            android:drawableTop="@drawable/rb_home_drawable_selector"
            android:gravity="center"
            android:text="首页"
            style="@style/bottom_tag_style"
            />

        <RadioButton
            android:id="@+id/rb_topic"
            android:drawableTop="@drawable/rb_topic_drawable_selector"
            android:gravity="center"
            android:text="话题"
            style="@style/bottom_tag_style"
            />

        <RadioButton
            android:id="@+id/rb_find"
            android:drawableTop="@drawable/rb_find_drawable_selector"
            android:gravity="center"
            android:text="发现"
            style="@style/bottom_tag_style"
            />


        <RadioButton
            android:id="@+id/rb_my"
            android:drawableTop="@drawable/rb_my_drawable_selector"
            android:gravity="center"
            android:text="我的"
            style="@style/bottom_tag_style"
            />




    </RadioGroup>

</LinearLayout>

3、style.xm中的bottom_tag_style是公共的button属性

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="bottom_tag_style" >
        <!-- Customize your theme here. -->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_gravity">center_vertical</item>

        <item name="android:button">@null</item>
        <item name="android:drawablePadding">5dp</item>
        <item name="android:textColor">@drawable/bottom_textcolor_drawable_selector</item>

        <item name="android:textSize">14sp</item>
        <item name="android:layout_weight">1</item>
    </style>
</resources>

4、NoScrollViewPager在布局文件中使用该类的时候,实例化该类用该构造方法,这个方法不能少,少的化会崩溃。

package com.vitoyan.myangtzeu.view;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

/**
 * 作者:Vito-Yan
 * 作用:自定义不可以滑动的ViewPager
 */
public class NoScrollViewPager extends ViewPager {
    /**
     * 通常在代码中实例化的时候用该方法
     * @param context
     */
    public NoScrollViewPager(Context context) {
        super(context);
    }

    /**
     * 在布局文件中使用该类的时候,实例化该类用该构造方法,这个方法不能少,少的化会崩溃。
     * @param context
     * @param attrs
     */
    public NoScrollViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 重写触摸事件,消费掉
     * @param ev
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return true;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return false;
    }
}

具体的源代码可以在我的github上查看https://github.com/Vito-Yan/MYangtzeu

下面我们使用xutils来初始化控件

 

我的长大app开发教程第二弹:完成ContentFragment底部按钮

标签:flat   解决   http   下载   find   nta   size   contex   appcompat   

原文地址:http://www.cnblogs.com/Vito-Yan/p/8017668.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!