即时通讯--主页的搭建(Android)
- 作者: 别吵吵吻我
- 来源: 51数据库
- 2021-08-24
主页的页面如下
Tab栏和Fragment之间的切换
思路如下
- 先初始化星球、广场、聊天、我的四个界面的Fragment
- 点击星球的时候，更改星球的图片和文字颜色，其它的不变，并且显示星球所对应的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>
到这里，我们主页的搭建已经完成了，下节我们就来初始化融云，为我们后面的即时通讯铺路。
推荐阅读
热点文章
android中Bitmap用法(显示,保存,缩放,旋转)实例分析
12
android 仿微信聊天气泡效果实现思路
1
Android的尺度，drawable-xxxxxxx
2
Codeforces Round #656 (Div. 3) (C、D题)
1
Android之handler异步消息处理机制解析
6
GridView中图片显示出现上下间距过大，左右图片显示类似瀑布流的问题
0
AsyncTask的简单使用
5
两个简单Fragment之间的通信（三种方式）
18
uboot修改设置boot参数命令
41
android中实现从相册中一次性获取多张图片与拍照，并将选中的图片显示出来
2
