Android——“i 分享”APP开发Day01

  • 创建Project 并命名为Discover
  1. 创建启动页的Java文件——SplashActivity.java继承于Activity
  2. 在AndroidManifest.xml中配置首先激活的Activity为.SplashActivity
  3. 创建启动页的布局文件——splash.xml
  4. 在drawable中创建样式文件home_gradient.xml设置启动页背景的渐变效果
  5. SplashActivity.java中检查网络是否可用,此时要在配置文件上设置权限
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET"/>
  •  在SplashActivity应用对话框(课本94),弹出设置网络的的信息 
  • 用AlphaAnimation创建透明度渐变的动画,将动画设置到起始页
  • 当网络可用时,则启动线程,加载主页,否则就退出程序

——SplashActivity.java文件的代码

 

package com.example.discover;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.os.Bundle;
import android.os.Handler;
import android.view.Window;
import android.view.animation.AlphaAnimation;
import android.widget.LinearLayout;


//启动页
public class SplashActivity extends Activity {
    private LinearLayout mLinearLayout;
    //重写onCreate
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);  //隐藏标题栏
        setContentView(R.layout.splash);

        mLinearLayout = (LinearLayout)this.findViewById(R.id.LinearLayout01);

        //判端当前网络是否可用,可用则进入主页
        if(isNetWorkConnetcted()){
            //设置进入起始页的动画
            AlphaAnimation aa = new AlphaAnimation(0.0f,1.0f);   //设置透明度从0变化到1
            aa.setDuration(2000); //设置动画时长为2秒
            mLinearLayout.setAnimation(aa);  //将动画设置到起始页
            mLinearLayout.startAnimation(aa);  //启动动画

            //通过handler设置延时两秒后执行r任务
            new Handler().postDelayed(new LoadMainTask(),2000);

        }else{
            showSetNetworkDialog();
        }

    }

    /*判端网络状态*/
    private boolean isNetWorkConnetcted(){
        ConnectivityManager manager = (ConnectivityManager)getSystemService(CONNECTIVITY_SERVICE);   //进行类型转换
        NetworkInfo info = manager.getActiveNetworkInfo();   //获取所有可用的网络状态信息
        //info.isConnected();  检查网络是否连接

        boolean result;
        if(info!=null&&info.isConnected()){
            result = true;
        }else{
            result = false;
        }
        return result;
    }

    //弹出网络不可用的对话框,课本94页
    private void showSetNetworkDialog(){
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("网络设置");
        builder.setMessage("网络错误,请检查网络状态");
        builder.setPositiveButton("设置网络",new okClick());
        builder.setPositiveButton("取消",new cleanClick());
        builder.create().show();
    }

    //普通对话框的确定,点击后展示设置页面
    class okClick implements DialogInterface.OnClickListener{
        public void onClick(DialogInterface dialog, int which){
            //激活系统组件
            Intent intent = new Intent();
            intent.setClassName("com.android.settings","com.android.settings.WirelessSetting");   //参数:激活activity的包名、类名

            startActivity(intent);
            finish();
        }
    }

    //普通对话框的取消
    class cleanClick implements DialogInterface.OnClickListener{
        public void onClick(DialogInterface dialog, int which){
            //dialog.cancel();
            finish();  //关闭应用
        }
    }

    //启动线程,加载主页
    private class LoadMainTask implements Runnable{
        @Override
        public void run() {
            Intent intent = new Intent(SplashActivity.this,MainActivity.class);
            startActivity(intent);  //打开主页
            finish();   //关闭起始页
        }
    }

}
  1. 创建启动页的布局文件splash.xml
  2. 在drawable下创建home_gradient.xml对起始页的渐变背景进行设置——需要引入图片资源,以及在colors.xml中添加样式

——splash.xml文件代码

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

<LinearLayout android:id="@+id/LinearLayout01"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center"
    android:background="@drawable/home_gradient"
    android:orientation="vertical">
    <ImageView android:layout_marginTop="-60dip"
        android:paddingLeft="20dip"
        android:paddingRight="20dip"
        android:scaleType="centerInside"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/logo"
        android:src="@drawable/logo">
    </ImageView>
    <!-- android:scaleType是控制图片如何resized/moved来匹对ImageView的size CENTER_INSIDE
        / centerInside 将图片的内容完整居中显示,通过按比例缩小或原来的size使得图片长/宽等于或小于View的长/宽 -->
    <TextView android:text="@string/app_name"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_marginTop="20dip"
        android:typeface="serif"
        android:shadowDx="0"
        android:shadowDy="2"
        android:shadowRadius="1"
        android:shadowColor="#FFFFFF"
        android:textColor="#444444"
        android:textSize="35dip"
        android:gravity="bottom">
        <!--x、Y轴方向阴影宽度以及弧度Radius-->
    </TextView>
    <TextView android:text="兴趣分享"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_marginTop="20dip" android:typeface="serif"
        android:shadowDx="0" android:shadowDy="2" android:shadowRadius="1"
        android:shadowColor="#FFFFFF" android:textColor="#444444"
        android:textSize="25dip" android:gravity="bottom">
    </TextView>

    <TextView android:layout_width="wrap_content"
        android:text="发现有趣的人和事"
        android:layout_height="wrap_content" android:layout_marginTop="20dip"
        android:typeface="serif" android:shadowDx="0" android:shadowDy="2"
        android:shadowRadius="1" android:shadowColor="#FFFFFF"
        android:textColor="#444444" android:textSize="20dip" android:id="@+id/versionNumber"
        android:gravity="bottom">
    </TextView>
</LinearLayout>

 

  •  创建main_tab.xml文件设计实现tab切换功能的界面

——main_tab.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" >

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </FrameLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_marginBottom="4dp"
        android:background="@color/bg_gray"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp">

        <RelativeLayout
            android:id="@+id/discover_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/discover_image"
                    android:layout_width="wrap_content"
                    android:layout_height="40dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/tab_icon_two_un_select" />

                <TextView
                    android:id="@+id/discover_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="发现"
                    android:textColor="#82858b" />
            </LinearLayout>
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/find_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/find_image"
                    android:layout_width="wrap_content"
                    android:layout_height="40dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/tab_icon_three_un_select" />

                <TextView
                    android:id="@+id/find_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="查找"
                    android:textColor="#82858b" />
            </LinearLayout>
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/edit_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/more_image"
                    android:layout_width="wrap_content"
                    android:layout_height="40dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/tab_icon_four_un_select" />

                <TextView
                    android:id="@+id/more_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="发布"
                    android:textColor="#82858b" />
            </LinearLayout>
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/my_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/my_image"
                    android:layout_width="wrap_content"
                    android:layout_height="40dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/tab_icon_one_un_select" />

                <TextView
                    android:id="@+id/my_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="我的"
                    android:textColor="#82858b" />
            </LinearLayout>
        </RelativeLayout>

    </LinearLayout>

</LinearLayout>

  •  在MainActivity.java中用fragment实现tab切换功能
  1. 每一个Tab变成一个Fragment,新建类MyTabFragment、DiscoverTabFragment、FindTabFragment、EditTabFragment继承自Fragment——可参考链接https://www.cnblogs.com/fuly550871915/p/4850056.html

——DiscoverTabFragment.java文件代码如下,其他文件几乎相同,只需要改变R.layout对应的布局

package com.example.discover;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class DiscoverTabFragment extends Fragment {
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View discoverLayout = inflater.inflate(R.layout.discover_tab_content, container, false);
        return discoverLayout;
    }
}
  • 创建每个tab对应的页面布局文件
  1. 在顶部添加logo和APP Namede 标识以及退出程序的Button
  2. 页面内容暂时设置为一句话和一个图标

——discover_tab_content.xml文件内容如下,其他页面类似

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <LinearLayout android:gravity="center_vertical"
        android:orientation="horizontal" android:id="@+id/title_bar"
        android:background="@drawable/title_bg_night" android:layout_width="fill_parent"
        android:layout_height="35.0dip">
        <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:src="@drawable/app_icon" />
        <LinearLayout android:gravity="center_vertical"
            android:layout_width="0.0dip" android:layout_height="wrap_content"
            android:layout_weight="1.0">
            <TextView android:textSize="16.0sp" android:textColor="@color/titleTextColor"
                android:singleLine="true" android:id="@+id/myTitle"
                android:layout_width="fill_parent" android:ellipsize="end"
                android:layout_height="wrap_content" android:layout_marginLeft="2.0dip"
                android:text="@string/app_name" />
        </LinearLayout>


        <ImageButton android:id="@+id/back_button"
            android:layout_gravity="center" android:background="@color/transparent"
            android:layout_width="60.0dip" android:layout_height="29.0dip"
            android:layout_marginRight="5.0dip" android:src="@drawable/exit" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/tab_icon_two" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="10dp"
            android:text="这是发现界面"
            android:textSize="20sp" />
    </LinearLayout>

</RelativeLayout>
  • 在MainActivity.java中设置点击事件
  1. 初始化布局元素,获取到tab、tab中的图片、文字等控件的实例
  2. 设置第一次启动时的页面为第0个tab,即为发现页
  3. 设置每个tab点击后的图片、文字变化以及显示对应的Fragment
  4. 另外,为实现tab切换还需要两个方法,分别用于清除tab的选中状态和设置Fragment为隐藏状态

——MainActivity.java文件的代码

package com.example.discover;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements View.OnClickListener {

    /**
     * 用于展示我的Fragment
     */
    private MyTabFragment myFragment;

    /**
     * 用于展示发现的Fragment
     */
    private DiscoverTabFragment discoverFragment;

    /**
     * 用于展示查找的Fragment
     */
    private  FindTabFragment findFragment;

    /**
     * 用于展示发布的Fragment
     */
    private EditTabFragment moreFragment;

    /**
     * 我的布局
     */
    private View myLayout;

    /**
     * 发现界面布局
     */
    private View discoverLayout;

    /**
     * 查找界面布局
     */
    private View findLayout;

    /**
     * 发布界面布局
     */
    private View editLayout;

    /**
     * 在Tab布局上显示我的图标的控件
     */
    private ImageView myImage;

    /**
     * 在Tab布局上显示发现图标的控件
     */
    private ImageView discoverImage;

    /**
     * 在Tab布局上显示查找图标的控件
     */
    private ImageView findImage;

    /**
     * 在Tab布局上显示更多图标的控件
     */
    private ImageView moreImage;

    /**
     * 在Tab布局上显示我的标题的控件
     */
    private TextView myText;

    /**
     * 在Tab布局上显示发现标题的控件
     */
    private TextView discoverText;

    /**
     * 在Tab布局上显示c查找标题的控件
     */
    private TextView findText;

    /**
     * 在Tab布局上显示更多标题的控件
     */
    private TextView moreText;

    /**
     * 用于对Fragment进行管理,事务
     */
    private FragmentTransaction ftr;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main_tab);

        // 初始化布局元素
        initViews();
        //initEvent();//初始化事件
        // 第一次启动时选中第0个tab
        setTabSelection(0);
    }

    /**
     * 在这里获取到每个需要用到的控件的实例,并给它们设置好必要的点击事件。
     */
    private void initViews() {
        myLayout = findViewById(R.id.my_layout);
        discoverLayout = findViewById(R.id.discover_layout);
        findLayout = findViewById(R.id.find_layout);
        editLayout = findViewById(R.id.edit_layout);

        myImage = (ImageView) findViewById(R.id.my_image);
        discoverImage = (ImageView) findViewById(R.id.discover_image);
        findImage = (ImageView) findViewById(R.id.find_image);
        moreImage = (ImageView) findViewById(R.id.more_image);

        myText = (TextView) findViewById(R.id.my_text);
        discoverText = (TextView) findViewById(R.id.discover_text);
        findText = (TextView) findViewById(R.id.find_text);
        moreText = (TextView) findViewById(R.id.more_text);

        discoverLayout.setOnClickListener(this);
        findLayout.setOnClickListener(this);
        editLayout.setOnClickListener(this);
        myLayout.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.discover_layout:
                // 当点击了发现tab时,选中第1个tab
                setTabSelection(0);
                break;
            case R.id.find_layout:
                // 当点击了查找tab时,选中第2个tab
                setTabSelection(1);
                break;
            case R.id.edit_layout:
                // 当点击了发布tab时,选中第3个tab
                setTabSelection(2);
                break;
            case R.id.my_layout:
                // 当点击了我的tab时,选中第4个tab
                setTabSelection(3);
                break;
            default:
                break;
        }
    }

    /**
     * 根据传入的index参数来设置选中的tab页。
     *
     * @param index
     *            每个tab页对应的下标。0表示发现,1表示查找,2表示发布,3表示我的。
     */
    private void setTabSelection(int index) {
        // 每次选中之前先清楚掉上次的选中状态
        clearSelection();
        // 开启一个Fragment事务
        FragmentManager fm = getSupportFragmentManager();
        ftr  = fm.beginTransaction();//开启一个事务
        // 先隐藏掉所有的Fragment,以防止有多个Fragment显示在界面上的情况
        hideFragments(ftr);//自定义一个方法,来隐藏所有的fragment
        switch (index) {
            case 0:
                // 当点击了发现tab时,改变控件的图片和文字颜色
                discoverImage.setImageResource(R.drawable.tab_icon_two);
                discoverText.setTextColor(Color.GREEN);
                if (discoverFragment == null) {
                    // 如果discoverFragment为空,则创建一个并添加到界面上
                    discoverFragment = new DiscoverTabFragment();
                    ftr.add(R.id.content, discoverFragment);
                } else {
                    // 如果discoverFragment不为空,则直接将它显示出来
                    ftr.show(discoverFragment);
                }
                break;
            case 1:
                // 当点击了查找tab时,改变控件的图片和文字颜色
                findImage.setImageResource(R.drawable.tab_icon_three);
                findText.setTextColor(Color.GREEN);
                if (findFragment == null) {
                    // 如果findFragment为空,则创建一个并添加到界面上
                    findFragment = new FindTabFragment();
                    ftr.add(R.id.content, findFragment);
                } else {
                    // 如果findFragment不为空,则直接将它显示出来
                    ftr.show(findFragment);
                }
                break;
            case 2:
            default:
                // 当点击了发布tab时,改变控件的图片和文字颜色
                moreImage.setImageResource(R.drawable.tab_icon_four);
                moreText.setTextColor(Color.GREEN);
                if (moreFragment == null) {
                    // 如果moreFragment为空,则创建一个并添加到界面上
                    moreFragment = new EditTabFragment();
                    ftr.add(R.id.content, moreFragment);
                } else {
                    // 如果moreFragment不为空,则直接将它显示出来
                    ftr.show(moreFragment);
                }
                break;
            case 3:
                // 当点击了我的tab时,改变控件的图片和文字颜色
                myImage.setImageResource(R.drawable.tab_icon_one);
                myText.setTextColor(Color.GREEN);
                if (myFragment == null) {
                    // 如果myFragment为空,则创建一个并添加到界面上
                    myFragment = new MyTabFragment();
                    ftr.add(R.id.content, myFragment);
                } else {
                    // 如果myFragment不为空,则直接将它显示出来
                    ftr.show(myFragment);
                }
                break;
        }
        ftr.commit();
    }

    /**
     * 清除掉所有的选中状态。
     */
    private void clearSelection() {
        myImage.setImageResource(R.drawable.tab_icon_one_un_select);
        myText.setTextColor(Color.parseColor("#82858b"));
        discoverImage.setImageResource(R.drawable.tab_icon_two_un_select);
        discoverText.setTextColor(Color.parseColor("#82858b"));
        findImage.setImageResource(R.drawable.tab_icon_three_un_select);
        findText.setTextColor(Color.parseColor("#82858b"));
        moreImage.setImageResource(R.drawable.tab_icon_four_un_select);
        moreText.setTextColor(Color.parseColor("#82858b"));
    }

    /**
     * 将所有的Fragment都置为隐藏状态。
     *
     * @param transaction
     *            用于对Fragment执行操作的事务
     */
    private void hideFragments(FragmentTransaction transaction) {
        if (myFragment != null) {
            transaction.hide(myFragment);
        }
        if (discoverFragment != null) {
            transaction.hide(discoverFragment);
        }
        if (findFragment != null) {
            transaction.hide(findFragment);
        }
        if (moreFragment != null) {
            transaction.hide(moreFragment);
        }
    }
}

 

  • 开始实现上述的tab切换功能之后,应用的大体框架就出来了,此时就可以开始优化tab对应的四个界面(未完待续)

——“我的”页面布局my_tab_content.xml

     

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章