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

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

突然发现有点知乎的味道。。。的确。。知乎灰#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来初始化控件

时间: 2024-11-10 10:20:06

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

我的长大app开发教程第一弹:Fragement布局

在接下来的一段时间里我会发布一个相对连续的Android教程,这个教程会讲述我是如何从零开始开发"我的长大"这个Android应用. 在开始之前,我先来介绍一下"我的长大":这是一个校园社交app,准确点说是一个资讯+社交的校园app.目标用户是在校大学生,老师.项目初期提供的功能有:校园资讯,校园服务,校园问答,核心的社交功能会在稍后视情况推出.我们的竞争对手有微信,QQ,空间,微博,知乎...等杀手级应用,所以我们压力还是有点大,但是,还有机会(逃...当我没说

黑马程序员:赶紧下载iOS10开发教程第二弹

虽然6月13日WWDC2016的发布会结束了,但是本届大会的开发者session环节还在持续进行着.黑马程序员本着对技术的狂热,对学生负责的态度,仍然坚持每天对课程进行深入的研发.本文主要是黑马程序员对iOS 10 中SDK所更新的主要内容进行总结.根据黑马程序员惯例,在文章的最后,有相关相关教学视频及Demo会有分享链接,供各位下载! 1.Grand Center Dispatch GCD 在本次一更新主要有以下内容: ?创建私有队列 ?安排异步执行的工作项目(items) ?GCD能自动将工

我的长大app开发教程第三弹:实现四个子页面绑定RadioButton

在开始之前先上一张图 在上一节中我们实现了底部Button,这一弹我们要实现点击四个按钮分别切换到不同页面,我们可以把页面分为两部分,顶部栏和中间内容部分,我们可以通过线性布局包裹两部分内容,顶部栏又是一个线性布局:一个TextView,一个ImageButton,中间内容采用帧布局. 1.项目结构: 2.四个页面的基类BasePager package com.vitoyan.myangtzeu.base; import android.content.Context; import andr

AndroidStudio使用教程(第二弹)

AndroidStudio使用教程(第二弹) 迁移Eclipse工程到Android Studio 官方文档中说Android Studio可以兼容Eclipse的现有工程,但需要做一些操作: Eclipse进行项目构建 首先升级ADT到最新版本, 好像是22之后,选择需要从Eclipse导出的工程,右键选择Export并选择Android下的Generate Gradle Build Files, 运行完成之后你会发现在项目目录中多了一个build.gradle, 这就是Android Stu

一看就懂的手机APP开发教程

现在的移动互联网属于全民的狂欢时代,是每个人.每个用户.每个企业的欢畅淋漓的时代,所以APP正在势如破竹地开拓广阔的市场.手机APP开发指的是专注于手机应用软件开发与服务,是当前最为迫切的需求.无独有偶,APICloud产品的业务就是APP开发平台,构建一个平台为用户服务. APICloud产品为移动开发者从"云"和"端"两个方向提供API,不仅简化移动应用开发技术,而且大幅提升移动应用开发和管理的效率.手机APP开发需要的便是简单的方式和便捷的方式,选择一款合适的

iOS开发&gt;学无止境 - UITablView上下滑动控制底部按钮的出现和消失

今天我们一起来做一个好玩的功能,通过UITablView上下滑动控制底部按钮的出现和消失.先来看看效果: 需求分析 要做一个这样的功能,对你来说应该不难,实现的方式也有很多.我们来分析一下要实现那几个小功能点: UITablView向上滑动,底部按钮消失 UITablView向下滑动,底部按钮出现 UITablView滑动到底部,底部按钮出现 主要就是这三个小功能点.那么很简单,我们只需要判断UITablView是往上滑动,还是往下滑动,以及判断UITablView是否滑动到底部即可. 代码实现

DuiVision开发教程(18)-弹出窗

DuiVision的弹出窗口类CDlgPopup,是菜单.下拉列表等控件的父类,也可以单独使用,用于创建弹出窗口,弹出窗口默认是非激活状态下自动关闭,例如鼠标点击到弹出窗口外面的区域,弹出窗口就会自动关闭,也可以设置为不自动关闭. 通用的弹出窗口一般通过对话框的OpenDlgPopup函数创建. 弹出窗的属性说明如下: 属性名 类型 说明 width 数字 窗口宽度 height 数字 窗口高度 bkimg 字符串 窗口的背景图片,如果指定了就使用指定的背景图片,否则使用全局设置的背景图片 bk

深入解析彩38源码搭建APP生成 整个APP开发标准流程

一般的APP开发及上线流程 步骤如下: 首先,制作一款APP,必须要有相关的idea(主意),也就是说,第一步是APP的idea(主意)形成. 其次,彩38源码搭建bbs.yasewl.com请添加链接描述就是通过那些idea来进行APP的主要功能设计以及大概界面构思和设计. App的开发是一个不断推敲的过程. 首先,如果要做一款app,必须要前期进行沟通,初步表明此款app要实现的效果,属于哪个类型的app.在功能和实现价值基本敲定的情况下,开始进入项目评估阶段.这个时候产品经理会根据之前商定

一看就懂的Android APP开发入门教程

一看就懂的Android APP开发入门教程 作者: 字体:[增加 减小] 类型:转载 这篇文章主要介绍了Android APP开发入门教程,从SDK下载.开发环境搭建.代码编写.APP打包等步骤一一讲解,非常简明的一个Android APP开发入门教程,需要的朋友可以参考下 工作中有做过手机App项目,前端和android或ios程序员配合完成整个项目的开发,开发过程中与ios程序配合基本没什么问题,而android各种机子和rom的问题很多,这也让我产生了学习android和ios程序开发的