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

     

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