黑马程序员技术交流社区

标题: 一张贴教你写出一个 App [打印本页]

作者: 张老师 时间: 2016-12-28 15:33
标题: 一张贴教你写出一个 App
本帖最后由就业部_安卓组于 2016-12-28 15:32 编辑

   如果让你写一个项目，刚开始下手该怎么写呢？我们手机上装的那些 App 比如 QQ、微信、微博、淘宝等等，我们该怎么写出他们那样“类似”的项目呢？
   如果此时此刻让你仿照 QQ 的样子写一个项目，该如何下手呢？
   今天就讲一讲如何写一个简单的 App。（源码在附件里）

   首先，让我们来看一看当前市面上主流的 App 是什么样子，看看这些大公司的 App 是怎样的。我简单的截了几张图，大家看一下。

   由上图我们可以得知，虽然看起来这些 App 好像挺复杂的样子，让我们不知道从哪开始下手写，但是不要慌，咱们一点一点的分析。
   上面的图都有一个共同点，就是下面有几个按钮，每点击一个按钮，上面的内容都被置换掉。
   我们要抓住这个特点，接下来，咱们就按照这种特点来写一个“类似”的 App，首先咱们要开始写最外层的 ui 框架。我的思路是这样的，下面写四个按钮，上面的内容用一个 Fragment 来填充，每次点击按钮的时候，动态的替换上面的 Fragment 的内容，这样就能达到一个简单的 App 的效果了。首先我们要创建一个 project，暂时取名为 “SimpleApp”，创建好了之后，打开我们的 MainActivity，点开 xml 布局文件 activity_main.xml。我们要把这个界面写成类似 QQ 微信的那个样子，首先我们要分析一下，首先做一个这样的界面。

分析一下，下面是4个按钮，上面是一块内容区域。仔细观察QQ微信的页面，下面的按钮每次点击的时候，上面的内容区域都会更换，而且下面点击的时候是会变色的。咱们就先按照这样的来写一个试试。

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/activity_main"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context="com.mesmerize.simpleapp.MainActivity">



    <RadioGroup

        android:id="@+id/main_radio"

        android:layout_width="match_parent"

        android:layout_height="45dp"

        android:layout_alignParentBottom="true"

        android:background="@mipmap/bottom_background"

        android:gravity="center_vertical"

        android:orientation="horizontal"

        android:paddingTop="3dp">



        <RadioButton

            android:id="@+id/rb_recommend"

            style="@style/main_tab_bottom"

            android:drawableTop="@drawable/icon_recommend"

            android:text="推荐" />



        <RadioButton

            android:id="@+id/rb_go"

            style="@style/main_tab_bottom"

            android:drawableTop="@drawable/icon_go"

            android:text="逛" />



        <RadioButton

            android:id="@+id/rb_design"

            style="@style/main_tab_bottom"

            android:drawableTop="@drawable/icon_design"

            android:text="设计师" />



        <RadioButton

            android:id="@+id/rb_my"

            style="@style/main_tab_bottom"

            android:drawableTop="@drawable/icon_personal"

            android:text="我的" />

    </RadioGroup>



    <FrameLayout

        android:id="@+id/flc_content"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_above="@id/main_radio"></FrameLayout>

</RelativeLayout>

如上述代码所示，内容区域用一个 FrameLayout 来填充，下面用四个按钮来实现，并且每一个 Button 都抽出来一个 style

[XML] 纯文本查看 复制代码

 <!--首页底部按钮-->

    <style name="main_tab_bottom">

        <item name="android:textSize">11.0sp</item>

        <item name="android:textColor">@color/bottom_text_color</item>

        <item name="android:ellipsize">marquee</item>

        <item name="android:gravity">center</item>

        <item name="android:background">#00000000</item>

        <item name="android:paddingTop">1dp</item>

        <item name="android:layout_width">0dp</item>

        <item name="android:layout_height">match_parent</item>

        <item name="android:button">@null</item>

        <item name="android:singleLine">true</item>

        <item name="android:layout_weight">1.0</item>

    </style>

其中 textColor 的选项的 bottom_text_color.xml 就是一个选择器，如下：

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">



    <item android:state_pressed="true" android:color="#ff1753"/>

    <item android:state_checked="true" android:color="#ff1753"/>

    <item android:color="#646464"/> <!-- not selected -->



</selector>

这个效果就是当按下或者点击的时候变色，默认又有一个颜色。

注意到 activity_main.xml 中每一个 button 文字上面都有一个图标，并且每个图标还会根据自己的选中状态变换自己的颜色，这其实也是一个选择器。意思就是，虽然现在看起来只有四个图标，但其实是八张图片，每一个图标都有两个图片。为什么这样设计呢？因为每个图标都有两种状态，选中与未选中，当选中的时候就有颜色，否则就是一个灰色。让大家看一下这八张图片
首先是推荐按下状态和未按下状态的图片：

逛的图片：

设计师的图片：

我的图片：

然后就像字体的颜色选择器一样，咱们写四个图片的选择器。
icon_recommend.xml

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">



    <item android:drawable="@mipmap/index_pressed" android:state_pressed="true"></item>

    <item android:drawable="@mipmap/index_pressed" android:state_checked="true"></item>

    <item android:drawable="@mipmap/index"/>



</selector>

icon_go.xml

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">



    <item android:drawable="@mipmap/go_pressed" android:state_pressed="true"></item>

    <item android:drawable="@mipmap/go_pressed" android:state_checked="true"></item>

    <item android:drawable="@mipmap/go"/>



</selector>

incon_design.xml

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">



    <item android:drawable="@mipmap/design_pressed" android:state_pressed="true"></item>

    <item android:drawable="@mipmap/design_pressed" android:state_checked="true"></item>

    <item android:drawable="@mipmap/design"/>



</selector>

icon_personal.xml

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">



    <item android:drawable="@mipmap/my_pressed" android:state_pressed="true"></item>

    <item android:drawable="@mipmap/my_pressed" android:state_checked="true"></item>

    <item android:drawable="@mipmap/my"/>



</selector>

   将这些写好的xml文件放到drawable文件夹下面，然后在每个button里面以drawable的形式引入进去就可以了，activity_main.xml文件里面已经写好了，请自行查看。

   接下来咱们写 MainActivity
   分析一下，首先我们要把这四个按钮找出来，然后给他们设置上点击事件，然后在每个按钮点击的时候动态切换上面的 content 就可以了。咱们先做前面的事情：

[Java] 纯文本查看 复制代码

package com.mesmerize.simpleapp;



import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.RadioButton;

import android.widget.Toast;



public class MainActivity extends AppCompatActivity implements View.OnClickListener {



    private RadioButton rb_recommend;

    private RadioButton rb_go;

    private RadioButton rb_design;

    private RadioButton rb_my;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



        initView();

        initListener();

    }



    /**

     * 初始化 View 控件

     */

    private void initView(){



        rb_recommend = (RadioButton) findViewById(R.id.rb_recommend);

        rb_go = (RadioButton) findViewById(R.id.rb_go);

        rb_design = (RadioButton) findViewById(R.id.rb_design);

        rb_my = (RadioButton) findViewById(R.id.rb_my);



    }



    /**

     * 初始化 事件监听事件

     */

    private void initListener(){



        rb_recommend.setOnClickListener(this);

        rb_go.setOnClickListener(this);

        rb_design.setOnClickListener(this);

        rb_my.setOnClickListener(this);

    }





    @Override

    public void onClick(View v) {



        switch (v.getId()) {



            case R.id.rb_recommend:



                Toast.makeText(this, "选中了推荐页面", Toast.LENGTH_SHORT).show();

                break;

            case R.id.rb_go:



                Toast.makeText(this, "选中了逛页面", Toast.LENGTH_SHORT).show();

                break;

            case R.id.rb_design:



                Toast.makeText(this, "选中了设计师页面", Toast.LENGTH_SHORT).show();

                break;



            case R.id.rb_my:



                Toast.makeText(this, "选中了我的页面", Toast.LENGTH_SHORT).show();

                break;

        }



    }





}

代码很简单，就是查找控件，设置点击事件，然后每个按钮点击的时候弹出来一句话，再接下来咱们需要做的事情是写出来四个 Fragment，然后在按钮点击的时候动态去切换相应的Fragment就可以了。
这其实很简单，首先咱们写一个 Fragment ，比如叫 RecommendFragment

[Java] 纯文本查看 复制代码

package com.mesmerize.simpleapp;



import android.app.Fragment;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;



/**

 * Created by mesmerize on 2016/12/28.

 */

public class RecommendFragment extends Fragment {



    @Nullable

    @Override

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



        return inflater.inflate(R.layout.fragment_recommend,null);

    }

}

fragment_recommend.xml 如下：

[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="match_parent"

    android:orientation="vertical">



    <TextView

        android:text="我是推荐Fragment"

        android:textSize="20sp"

        android:gravity="center"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

</LinearLayout>

   代码很简单，就是一个 Fragment 填充了一个 xml 文件。xml 文件里绘制了一个 textView，显示了一段文本，咱们快速的用这种形式写出来其他三个 Fragment。
   代码这里由于篇幅原因就不写了，待会我会上传源代码上来。
   写完了这四个 Framgment 之后，咱们还要回头来编写一个 MainActivity。

[Java] 纯文本查看 复制代码

package com.mesmerize.simpleapp;



import android.app.FragmentManager;

import android.app.FragmentTransaction;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.RadioButton;



public class MainActivity extends AppCompatActivity implements View.OnClickListener {



    private RadioButton rb_recommend;

    private RadioButton rb_go;

    private RadioButton rb_design;

    private RadioButton rb_my;



    private RecommendFragment mRecommendFragment;

    private GoFragment mGoFragment;

    private DesignFragment mDesignFragment;

    private PersonalFragment mPersonalFragment;





    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



        initView();

        initListener();

        initDefaultFragment();

    }



    /**

     * 初始化 View 控件

     */

    private void initView(){



        rb_recommend = (RadioButton) findViewById(R.id.rb_recommend);

        rb_go = (RadioButton) findViewById(R.id.rb_go);

        rb_design = (RadioButton) findViewById(R.id.rb_design);

        rb_my = (RadioButton) findViewById(R.id.rb_my);



    }



    /**

     * 初始化 事件监听事件

     */

    private void initListener(){



        rb_recommend.setOnClickListener(this);

        rb_go.setOnClickListener(this);

        rb_design.setOnClickListener(this);

        rb_my.setOnClickListener(this);



    }



    /**

     * 初始化 默认显示的 Fragment

     */

    private void initDefaultFragment(){



        FragmentManager fm = getFragmentManager();

        FragmentTransaction transaction = fm.beginTransaction();

        transaction.replace(R.id.fl_content, new RecommendFragment());

        transaction.commit();



        rb_recommend.setChecked(true);

    }



    @Override

    public void onClick(View v) {



        FragmentManager fm = getFragmentManager();



        // 开启事务

        FragmentTransaction transaction = fm.beginTransaction();



        switch (v.getId()) {



            case R.id.rb_recommend:



                if (mRecommendFragment == null) {



                    mRecommendFragment = new RecommendFragment();

                }



                // 替换

                transaction.replace(R.id.fl_content, mRecommendFragment);



                break;

            case R.id.rb_go:



                if (mGoFragment == null) {



                    mGoFragment = new GoFragment();

                }



                // 替换

                transaction.replace(R.id.fl_content, mGoFragment);



                break;

            case R.id.rb_design:



                if (mDesignFragment == null) {



                    mDesignFragment = new DesignFragment();

                }



                // 替换

                transaction.replace(R.id.fl_content, mDesignFragment);



                break;



            case R.id.rb_my:



                if (mPersonalFragment == null) {



                    mPersonalFragment = new PersonalFragment();

                }



                // 替换

                transaction.replace(R.id.fl_content, mPersonalFragment);



                break;



        }



        // 提交事务

        transaction.commit();

    }





}

运行效果如下：

点击下面的按钮，会变色，上面的内容也会跟着边，接下来你就可以随心所欲根据自己的需求来定制自己的界面了。
源码在附件。

   Android 人事+技术总贴
   Android 基础篇总贴
   Android 进阶篇总贴
   Android 讨论区

   以上言论，如有错误或者表达不准确或者有纰漏的地方还请指正，同时欢迎大家在评论区留言给予一定的建议，我会根据大家的意见进行相应的改正，谢谢各位！

SimpleApp.zip

431.19 KB, 阅读权限: 10, 下载次数: 17

登录即可下载

作者: 相反人生 时间: 2016-12-28 18:15
新人给跪了我以后一定也可以的

作者: lingengye 时间: 2016-12-28 20:11
学习了

作者: anti 时间: 2016-12-29 14:55
向大神学习

作者: 张老师 时间: 2017-1-3 14:42

相反人生发表于 2016-12-28 18:15
新人给跪了我以后一定也可以的

对，一定可以的。而且会更好！

作者: 张老师 时间: 2017-1-3 14:43

lingengye 发表于 2016-12-28 20:11
学习了

加油

作者: 张老师 时间: 2017-1-3 14:43

anti 发表于 2016-12-29 14:55
向大神学习

以后你也可以的，一定可以！

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2