欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-13 14:40:59
...

主页的页面如下

即时通讯(三)--主页的搭建(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) {

    }
}

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

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

<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>

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

相关标签: Android即时通讯