- 创建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
扫一扫
7811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
