import com.example.fragment.DynamicFragment;
import com.example.fragment.HomeFragment;
import com.example.fragment.MessageFragment;
import com.example.fragment.PersonFragment;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
import android.widget.Toast;
/**
* 对fragment的切换,底部图标颜色的切换
* @author ansen
* @create time 2015-09-08
*/
/**
* 继承自FragmentActivity，这个死android:support-v4.jar包里面的一个类，可以兼容3.0以下版本使用Fragment
*/
public class MainActivity extends FragmentActivity {//注意：这里使用FragmentActivity
//要切换显示的四个Fragment
private HomeFragment homeFragment;
private DynamicFragment dynamicFragment;
private MessageFragment messageFragment;
private PersonFragment personFragment;
private int currentId = R.id.tv_main;// 当前选中id,默认是主页
private TextView tvMain, tvDynamic, tvMessage, tvPerson;//底部四个TextView
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tvMain = (TextView) findViewById(R.id.tv_main);
tvMain.setSelected(true);//首页默认选中 （一开进入页面的时候默认选中的）
tvDynamic = (TextView) findViewById(R.id.tv_dynamic);
tvMessage = (TextView) findViewById(R.id.tv_message);
tvPerson = (TextView ) findViewById(R.id.tv_person);
//默认加载首页（首页碎片）
homeFragment = new HomeFragment();
//add方法里面（参数1：FrameLayout id 2 添加的碎片） 记得commit
getSupportFragmentManager().beginTransaction().add(R.id.main_container,homeFragment).commit();
//4个TextView设置点击事件
tvMain.setOnClickListener(tabClickListener);
tvDynamic.setOnClickListener(tabClickListener);
tvMessage.setOnClickListener(tabClickListener);
tvPerson.setOnClickListener(tabClickListener);
//中间的那个图按钮设置点击监听
findViewById(R.id.iv_make).setOnClickListener(onClickListener);
}
/**
* 步骤
* 1.首先在onCreate方法设置布局文件，查找底部的4个TextView，给首页的TextView设置选择状态，并且默认加载首页的Fragment
* 最后给底部的TextView设置点击事件，还有中间的那个ImageView。
* 2，tabClickListener处理点击事件，跟上次点击的是否一致
* 如果一致不需要处理，
* 否则的话改变图标跟文字选中状态，还有Fragment的切换，并且把当前点击View的id设置成当前选中的id
* （这里分别调用了changeSelect(v.getId()
* changeFragment(v.getId()) （这里又调用hideFragment()方法）
* 和currentId = v.getId()）
*
* 还有中间的那个ImageView设置个点击方法弹出个Toast方法就可以了
*/
private OnClickListener onClickListener=new OnClickListener() {
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.iv_make:
Toast.makeText(MainActivity.this,"点击了制作按钮",Toast.LENGTH_SHORT).show();
break;
}
}
};
private OnClickListener tabClickListener = new OnClickListener() {
@Override
public void onClick(View v) {
if (v.getId() != currentId) {//如果当前选中跟上次选中的一样,不需要处理
changeSelect(v.getId());//改变图标跟文字颜色的选中
changeFragment(v.getId());//fragment的切换
currentId = v.getId();//设置选中id （这步很重要，记得要写）
}
}
};
/**
* 改变fragment的显示
* changeFragment 改变Fragment的显示，首选调用hideFragments方法来隐藏所有的Fragment
* 然后根据当前选中的Tab（也就是id），爱决定显示那个Fragment。显示的时候需要先判断这个Fragment有没有显示过。
* 如果没显示过，需要新建一个Fragment，然后调用FragmentTransaction的add方法添加进去
* 如果有显示过（就是之前添加过的）,直接调用show方法就行
* @param resId
*/
private void changeFragment(int resId) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();//开启一个Fragment事务
hideFragments(transaction);//隐藏所有fragment
if(resId==R.id.tv_main){//主页
/**
* 一开始都是为null的，但是注意：首页不一样，在一开进来的时候就在onCreate方法里面添加对拼，
* 上面已经创建了一实例
*/
if(homeFragment==null){//如果为空先添加进来.不为空直接显示(注意：这个是等于null，null，才能new)
homeFragment = new HomeFragment();
transaction.add(R.id.main_container,homeFragment);//new完，这步记得要写上
}else {//不为null的话，就直接显示首页的碎片
transaction.show(homeFragment);//显示首页的Fragment
}
}else if(resId==R.id.tv_dynamic){//动态
if(dynamicFragment==null){
dynamicFragment = new DynamicFragment();
transaction.add(R.id.main_container,dynamicFragment);
}else {
transaction.show(dynamicFragment);
}
}else if(resId==R.id.tv_message){//消息中心
if(messageFragment==null){
messageFragment = new MessageFragment();
transaction.add(R.id.main_container,messageFragment);
}else {
transaction.show(messageFragment);
}
}else if(resId==R.id.tv_person){//我
if(personFragment==null){
personFragment = new PersonFragment();
transaction.add(R.id.main_container,personFragment);
}else {
transaction.show(personFragment);
}
}
transaction.commit();//
}
/**
* 显示之前隐藏所有fragment
* 先判断Fragment是否为null，不为null就调用transaction.hide方法隐藏Fragment
* @param transaction 碎片事务
*/
private void hideFragments(FragmentTransaction transaction){
if (homeFragment != null)//不为空才隐藏,如果不判断第一次会有空指针异常
transaction.hide(homeFragment);
if (dynamicFragment != null)
transaction.hide(dynamicFragment);
if (messageFragment != null)
transaction.hide(messageFragment);
if (personFragment != null)
transaction.hide(personFragment);
}
/**
* 改变TextView选中颜色
* changeSelect方法改变TextView选中颜色，瘦啊全部设置成为选中，然后判断当前选中的是哪一个。
*
* （这里的代码只需只需要设置选择状态就可以了，因为在布局xml文件里面已经设置选择和未选中的样子了）
* @param resId
*/
private void changeSelect(int resId){
/**
* 这里的意思是说，结合上面的点击事件的方法，如果不等于当前id（也就是主页的id），就调用这个changeSelect
* 方法，改变TextView选中颜色，
* 然后这里一开始，4个按钮设置为未选中状态，最后当选中到某个具体的按钮的时候，就设置为选中状态
*/
tvMain.setSelected(false);
tvDynamic.setSelected(false);
tvMessage.setSelected(false);
tvPerson.setSelected(false);
switch (resId) {//这个resId是TextView按钮的id
case R.id.tv_main:
tvMain.setSelected(true);
break;
case R.id.tv_dynamic:
tvDynamic.setSelected(true);
break;
case R.id.tv_message:
tvMessage.setSelected(true);
break;
case R.id.tv_person:
tvPerson.setSelected(true);
break;
}
}
}
activity_main布局
<!--
FrameLayout tab切换的时候用它来显示Fragment。
-->
<FrameLayout
android:id="@+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/view_line"/>
<!--
第二个view就是一个分割线
-->
<View
android:id="@+id/view_line"
android:layout_height="1dp"
android:layout_width="match_parent"
android:background="#DCDBDB"
android:layout_above="@+id/rl_bottom"/>
<!--
第三个view是LinearLayout,设置了android：layout_alignParentBottom="true",
在父view(父窗体)的底部显示，权重都是1，
但是最中间的那个没有内容，是一个空的view，只是用它来占个位置。
-->
<LinearLayout
android:id="@+id/rl_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:background="#F2F2F2"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_main"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:drawableTop="@drawable/tab_item_main_img_selector"
android:drawablePadding="@dimen/main_tab_item_image_and_text"
android:focusable="true"
android:gravity="center"
android:text="@string/main"
android:textColor="@drawable/tabitem_txt_sel" />
<TextView
android:id="@+id/tv_dynamic"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:drawableTop="@drawable/tab_item_dynamic_img_selector"
android:drawablePadding="@dimen/main_tab_item_image_and_text"
android:focusable="true"
android:gravity="center"
android:text="@string/dynamic"
android:textColor="@drawable/tabitem_txt_sel" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<TextView
android:id="@+id/tv_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:drawableTop="@drawable/tab_item_message_img_selector"
android:drawablePadding="@dimen/main_tab_item_image_and_text"
android:focusable="true"
android:gravity="center"
android:text="@string/message"
android:textColor="@drawable/tabitem_txt_sel" />
<TextView
android:id="@+id/tv_person"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:drawableTop="@drawable/tab_item_person_img_selector"
android:drawablePadding="@dimen/main_tab_item_image_and_text"
android:focusable="true"
android:gravity="center"
android:text="@string/person"
android:textColor="@drawable/tabitem_txt_sel"/>
</LinearLayout>
<!--
第四个view是一个ImageView，也设置了android:layout_alignParentBottom="true"属性，
并且通过android:layout_centerHorizontal="true"设置水平居中，在RelativeLayout里面如果两个View在同一个位置上，
后面的View就会覆盖之前的View，所以这个ImageView覆盖了LinearLayout最中间的那个View。
-->
<ImageView
android:id="@+id/iv_make"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:paddingBottom="10dp"
android:src="@drawable/icon_tab_make_select"/>
2. 选中和未选中设置
textcolor选中和未选中xml文件设置
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 选中状态 main_tab_item_text_select 是是color里面的name-->
<item android:color="@color/main_tab_item_text_select" android:state_selected="true"/>
<!--非选中状态-->
<item android:color="@color/main_tab_item_text_normal"/>
</selector>
里面的main_tab_item_text_select对应Values\colors.xml 里面的name的main_tab_item_text_select
下面的第一个
在这里插入图片描述
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="main_tab_item_text_select">#00ceaa</color>
<color name="main_tab_item_text_normal">#808288</color>
<color name="tab_item_background">#ffffffff</color>
<color name="main_title_text_select">#78ffffff</color>
<color name="main_title_text_normal">#ffffffff</color>
</resources>
2.2文字顶部图片（图标）也就是drawableTop的选中和未选中xml设置
在这里插入图片描述
在这里插入图片描述
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 选中状态显示 -->
<item android:drawable="@drawable/icon_tab_main_select" android:state_selected="true"/>
<!--非选中状态显示-->
<item android:drawable="@drawable/icon_tab_main_normal"/>
</selector>
2.3尺寸dimens也就是drawablePadding的尺寸设置（文字和顶部图标的距离）
[图片上传失败...(image-c2e269-1554344858968)]
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="main_tab_item_image_and_text">3dp</dimen>
</resources>
其他三个TextView也选中未选中还有文字 图标距离也是根据上面的三个来弄，这里就不浪费代码了
在这里插入图片描述
3. 4个Fragmenm碎片
/**
* 首页
* @author Ansen
* @create time 2015-09-08
*/
public class HomeFragment extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_home, null);
return rootView;
}
}
布局：
<?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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="这是首页"
android:textSize="20sp"/>
</RelativeLayout>
在这里插入图片描述
其他三个都是类似的，只需要改下文字就可以，这里就不添加代码了
image.png
网友评论