即时通讯--主页的搭建(Android)

主页的页面如下

Tab栏和Fragment之间的切换

思路如下

1. 先初始化星球、广场、聊天、我的四个界面的Fragment
2. 点击星球的时候，更改星球的图片和文字颜色，其它的不变，并且显示星球所对应的Fragment,其余的Fragment隐藏.

既然有了思路，那么就直接干代码吧

//初始化Tab栏的文字
private void initEvent() {
   //给4个设置点击事件
   ll_star.setOnClickListener(this);
   ll_square.setOnClickListener(this);
   ll_chat.setOnClickListener(this);
   ll_me.setOnClickListener(this);

   //设置文字
   tv_star.setText(R.string.text_main_star);
   tv_square.setText(R.string.text_main_square);
   tv_chat.setText(R.string.text_main_chat);
   tv_me.setText(R.string.text_main_me);

   //一进去默认显示星球Fragment
   checkMainTab(0);
}

//初始化Fragment
 private void initFragment() {
     //星球
     if(mStarFragment == null){
              mStarFragment = new StarFragment();
              mStarTransaction = getSupportFragmentManager().beginTransaction();
              //将FragLayout替换为Fragment
              mStarTransaction.add(R.id.mMainLayout,mStarFragment);
		      mStarTransaction.commit();
}
     //广场
              if(mSquareFragment == null){
              mSquareFragment = new SquareFragment();
              mSquareTransaction = getSupportFragmentManager().beginTransaction();
              //将FragLayout替换为Fragment
              mSquareTransaction.add(R.id.mMainLayout,mSquareFragment);
              mSquareTransaction.commit();
      }
      //聊天
              if(mChatFragment == null){
              mChatFragment = new ChatFragment();
              mChatTransaction = getSupportFragmentManager().beginTransaction();
              //将FragLayout替换为Fragment
              mChatTransaction.add(R.id.mMainLayout,mChatFragment);
              mChatTransaction.commit();
      }
      //我的
              if(mMeFragment == null){
              mMeFragment = new MeFragment();
              mMeTransaction = getSupportFragmentManager().beginTransaction();
              //将FragLayout替换为Fragment
              mMeTransaction.add(R.id.mMainLayout,mMeFragment);
              mMeTransaction.commit();
      }
}


//写几个方法，方便我们操作Fragment
 //用来显示单个Fragment
        private  void showFragment(Fragment fragment){
                if(fragment !=null){
                        FragmentTransaction beginTransaction = getSupportFragmentManager().beginTransaction();
                        //在每次单个Fragment显示之前 隐藏所有的Fragment
                        hideAllFragment(beginTransaction);
                        beginTransaction.show(fragment);
                        beginTransaction.commit();
                }
        }

        //隐藏所有的Fragment
        private  void hideAllFragment( FragmentTransaction beginTransaction){
                //星球
                if(mStarFragment!=null){
                        beginTransaction.hide(mStarFragment);
                }
                //广场
                if(mSquareFragment!=null){
                        beginTransaction.hide(mSquareFragment);

                }
                //聊天
                if(mChatFragment!=null){
                        beginTransaction.hide(mChatFragment);
                }
                //我的
                if(mMeFragment!=null){
                        beginTransaction.hide(mMeFragment);
                }
        }
         /*点击tab项 用来切换Fragment
        *  0: 星球
        *  1：广场
        *  2 :聊天
        *  3:我的
        */
        private  void checkMainTab(int index){
                switch (index){
                        case 0:
                                //显示星球
                                showFragment(mStarFragment);
                                //星球图片变为高亮的  其余图片变为默认
                                iv_star.setImageResource(R.drawable.img_star_p);
                                iv_square.setImageResource(R.drawable.img_square);
                                iv_chat.setImageResource(R.drawable.img_chat);
                                iv_me.setImageResource(R.drawable.img_me);

                                //星球的文字颜色 变为蓝色，其余为默认黑色
                                tv_star.setTextColor(getResources().getColor(R.color.colorAccent));
                                tv_square.setTextColor(Color.BLACK);
                                tv_chat.setTextColor(Color.BLACK);
                                tv_me.setTextColor(Color.BLACK);
                                break;
                        case 1:
                                //显示广场
                                showFragment(mSquareFragment);
                                //广场图片变为高亮的  其余图片变为默认
                                iv_star.setImageResource(R.drawable.img_star);
                                iv_square.setImageResource(R.drawable.img_square_p);
                                iv_chat.setImageResource(R.drawable.img_chat);
                                iv_me.setImageResource(R.drawable.img_me);
                                //广场的文字颜色 变为蓝色，其余为默认黑色
                                tv_star.setTextColor(Color.BLACK);
                                tv_square.setTextColor(getResources().getColor(R.color.colorAccent));
                                tv_chat.setTextColor(Color.BLACK);
                                tv_me.setTextColor(Color.BLACK);
                                break;
                        case 2:
                                //显示聊天
                                showFragment(mChatFragment);
                                //聊天图片变为高亮的  其余图片变为默认
                                iv_star.setImageResource(R.drawable.img_star);
                                iv_square.setImageResource(R.drawable.img_square);
                                iv_chat.setImageResource(R.drawable.img_chat_p);
                                iv_me.setImageResource(R.drawable.img_me);

                                //聊天的文字颜色 变为蓝色，其余为默认黑色
                                tv_star.setTextColor(Color.BLACK);
                                tv_square.setTextColor(Color.BLACK);
                                tv_chat.setTextColor(getResources().getColor(R.color.colorAccent));
                                tv_me.setTextColor(Color.BLACK);
                                break;
                        case 3:
                                //显示我的
                                showFragment(mMeFragment);
                                //我的图片变为高亮的  其余图片变为默认
                                iv_star.setImageResource(R.drawable.img_star);
                                iv_square.setImageResource(R.drawable.img_square);
                                iv_chat.setImageResource(R.drawable.img_chat);
                                iv_me.setImageResource(R.drawable.img_me_p);

                                //星球的文字颜色 变为蓝色，其余为默认黑色
                                tv_star.setTextColor(Color.BLACK);
                                tv_square.setTextColor(Color.BLACK);
                                tv_chat.setTextColor(Color.BLACK);
                                tv_me.setTextColor(getResources().getColor(R.color.colorAccent));
                                break;
                }
        }
 //点击具体的Tab 显示对应的Fragment
 @Override
        public void onClick(View v) {
                switch (v.getId()){
                        case R.id.ll_star:
                                checkMainTab(0);
                                break;
                        case R.id.ll_square:
                                checkMainTab(1);
                                break;
                        case R.id.ll_chat:
                                checkMainTab(2);
                                break;
                        case R.id.ll_me:
                                checkMainTab(3);
                                break;
                }
        }

现在我们的Tab栏切换Fragment已经完成。

3DTag的构建

现在我们来完成中间那个星球，中间的那个星球是GitHub上的一个第三方插件完成。
3DTag

代码如下

		mCloudView = view.findViewById(R.id.mCloudView);
        //初始化3D数据
        for (int i = 0; i < 100; i++) {
            mList.add("star"+i);
        }
        //创建3D星球的adapter
        CloudTagAdapter cloudTagAdapter = new CloudTagAdapter(mList, getActivity());
        //将adapter设置到view上面
        mCloudView.setAdapter(cloudTagAdapter);
        //监听事件
        mCloudView.setOnTagClickListener(new TagCloudView.OnTagClickListener() {
            @Override
            public void onItemClick(ViewGroup parent, View view, int position) {
                Toast.makeText(getActivity(), "position "+position, Toast.LENGTH_SHORT).show();
            }
        });
	
	//具体的显示在CloudTagAdapter 代码如下
public class CloudTagAdapter extends TagsAdapter {

    private List<String> mList;
    private  Context mContext;
    private LayoutInflater inflater;

    public CloudTagAdapter(List<String> mList, Context mContext) {
        this.mList = mList;
        this.mContext = mContext;
        this.inflater = (LayoutInflater) 
        mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public int getCount() {
        return mList.size();
    }

    @Override
    public View getView(Context context, int position, ViewGroup parent) {
        View view = inflater.inflate(R.layout.layout_star_view_item,null);

        TextView textView = view.findViewById(R.id.tv_star_name);
        ImageView imageView = view.findViewById(R.id.iv_stat_img);
        textView.setText(mList.get(position));

        switch (position%10){
            case 0:
                imageView.setImageResource(R.drawable.img_star_icon_1);
                break;
            case 1:
                imageView.setImageResource(R.drawable.img_star_icon_2);
                break;
            case 2:
                imageView.setImageResource(R.drawable.img_star_icon_3);
                break;
            case 3:
                imageView.setImageResource(R.drawable.img_star_icon_4);
                break;
            default:
                imageView.setImageResource(R.drawable.img_star_icon_5);
                break;
        }
        return view;
    }

    @Override
    public Object getItem(int position) {
        return mList.get(position);
    }

    @Override
    public int getPopularity(int position) {
        return 7;
    }

    @Override
    public void onThemeColorChanged(View view, int themeColor) {

    }
}

四个按钮的布局 由于太简单，就直接上图

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/ll_random"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:background="@drawable/shape_star_1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/img_star_card_1" />

            <TextView
                android:id="@+id/tv_random"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/text_main_star_1"
                android:textColor="@android:color/white"
                android:textSize="18sp"
                android:textStyle="bold" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_soul"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:background="@drawable/shape_star_2"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/img_star_card_2" />

            <TextView
                android:id="@+id/tv_soul"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/text_main_star_2"
                android:textColor="@android:color/white"
                android:textSize="18sp"
                android:textStyle="bold" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_fate"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:background="@drawable/shape_star_3"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/img_star_card_3" />

            <TextView
                android:id="@+id/tv_fate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/text_main_star_3"
                android:textColor="@android:color/white"
                android:textSize="18sp"
                android:textStyle="bold" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_love"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:background="@drawable/shape_star_4"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/img_star_card_4" />

            <TextView
                android:id="@+id/tv_love"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/text_main_star_4"
                android:textColor="@android:color/white"
                android:textSize="18sp"
                android:textStyle="bold" />

        </LinearLayout>

    </LinearLayout>

到这里，我们主页的搭建已经完成了，下节我们就来初始化融云，为我们后面的即时通讯铺路。

本文地址：https://blog.csdn.net/qq_43404873/article/details/109393272