- 創建Project 並命名爲Discover
- 創建啓動頁的Java文件——SplashActivity.java繼承於Activity
- 在AndroidManifest.xml中配置首先激活的Activity爲.SplashActivity
- 創建啓動頁的佈局文件——splash.xml
- 在drawable中創建樣式文件home_gradient.xml設置啓動頁背景的漸變效果
- 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(); //關閉起始頁 } } }
- 創建啓動頁的佈局文件splash.xml
- 在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切換功能
- 每一個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對應的頁面佈局文件
- 在頂部添加logo和APP Namede 標識以及退出程序的Button
- 頁面內容暫時設置爲一句話和一個圖標
——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中設置點擊事件
- 初始化佈局元素,獲取到tab、tab中的圖片、文字等控件的實例
- 設置第一次啓動時的頁面爲第0個tab,即爲發現頁
- 設置每個tab點擊後的圖片、文字變化以及顯示對應的Fragment
- 另外,爲實現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