android 4个点矫正不规则矩形_Android使用FragmentTabHost实现中间按钮凸出效果
生活随笔
收集整理的這篇文章主要介紹了
android 4个点矫正不规则矩形_Android使用FragmentTabHost实现中间按钮凸出效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目前很多app主頁都是由幾個tab頁組成,所以我們開發app的時候一般都會涉及到主頁tab的切換實現。常用的主頁tab切換實現可以用viewpage和FragmentActivity組合,用普通Button/TextView/RadioButton等等和FragmentTransaction的add、replace、remove、hide和show方法組合,以及Android官方框架FragmentTabHost。前面兩種實現起來會比較容易一點,但是,當你的底部菜單凹凸不規則或者 是要嵌入其它標簽(比如消息提示功能)的時候,那 FragmentTabHost 實現起來就更容易了。FragmentTabHost 作為 Android 4.0 版本的控件當然優點多多,已被項目廣泛使用,Android 5.0版本又推出TabLayout+ViewPager實現多頁切換的效果。此處主要講使用FragmentTabHost 實現中間按鈕凸出效果,說起FragmentTabHost,相信小伙伴們用得比較多也比較熟悉的是用其來實現類似如下圖所示的tab效果吧!上圖效果實現起來也是比較簡單的,今天我要記錄的是使用FragmentTabHost 實現如下圖所示的效果:可能會有很多大神看完效果圖 噗呲 一笑,覺得小菜一碟。那么這些大神可以繞道通行啦!下面直接進入正題,上代碼干貨:1.首先是activity_main.xml布局文件引用v4包的FragmentTabHost控件,FragmentTabHost 要想讓中間按鈕凸出需根據需求再拉控件覆蓋原本中間按鈕,其他按鈕凸出同理 android:layout_width="match_parent" android:layout_height="match_parent"> xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="match_parent"> android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> android:id="@android:id/tabcontent" android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="0" /> android:id="@+id/realtabcontent" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="45dp" //tab的高度 android:layout_weight="0" android:background="#F5F5F5" android:divider="#00000000" android:gravity="center" android:orientation="horizontal" /> android:id="@+id/main_image_center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerInParent="true" android:layout_marginBottom="17dp" android:src="@drawable/circle" /> android:id="@+id/main_tv_final" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:layout_marginBottom="2dp" android:text="金融圈" android:textColor="@color/main_tabtextcolor" android:textSize="12sp" />如果tab在頂部,只需要把xml中的TabWidget放在@android:id/tabcontent上即可2.搞定了xml接下來就是代碼部分了,先新建片段(根據自己需求確定新建幾個片段)此處我每個片段區別比較大,復用性差,所以5個tab新建了5個片段
HomeFragment.class, MessageFragment.class,?CenterFragment.class, FinancialFragment.class,MineFragment.class3.接下來最重要的代碼類MainActivity.java:public class MainActivity extends FragmentActivity implements OnClickListener { private FragmentTabHost mTabHost; //mTabHost控件 private Class[] clas = new Class[] { HomeFragment.class, MessageFragment.class, CenterFragment.class, FinancialFragment.class, MineFragment.class }; //片段 private int images[] = new int[] {R.drawable.tab_1_selector, R.drawable.tab_2_selector,1, R.drawable.tab_4_selector, R.drawable.tab_5_selector }; //tab按鈕 選中和不選中狀態 private TextView mBottom_center; //中間按鈕TextView private ImageView main_image_center; //中間按鈕ImageView @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initUI(); } public void initUI() { //底部中間按鈕控件 main_image_center = (ImageView) findViewById(R.id.main_image_center); main_image_center.setImageResource(R.drawable.nav_button_finance_default); //底部中間按鈕TextView mBottom_center = (TextView) findViewById(R.id.main_tv_final); //設置監聽 main_image_center.setOnClickListener(this); mBottom_center.setOnClickListener(this); String[] tabIndicatorArray = getResources().getStringArray(R.array.arr_tab_indicator); mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost); mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent); LayoutInflater inflater = getLayoutInflater(); for (int i = 0; i < images.length; i++) { View indicatorView = inflater.inflate(R.layout.g_list_item_viewpagerindicator, null); TextView tvIndicator = (TextView) indicatorView.findViewById(R.id.tv_title_indicator); tvIndicator.setText(tabIndicatorArray[i]); ImageView imageView = (ImageView) indicatorView.findViewById(R.id.ima_indicator); imageView.setImageResource(images[i]); //tabhost添加tab切換事件 tab0-tab4 mTabHost.addTab(mTabHost.newTabSpec("tab"+i).setIndicator(indicatorView), clas[i], null); mTabHost.setOnTabChangedListener(new OnTabChangeListener() { @Override public void onTabChanged(String tabId) { switch (tabId) { case "tab2": //獲取中間按鈕點擊事件 設置覆蓋控件 main_image_center.setImageResource(R.drawable.nav_button_finance_selected); mBottom_center.setTextColor(Color.parseColor("#ffd38a")); break; default: //其他四個按鈕 main_image_center.setImageResource(R.drawable.nav_button_finance_default); mBottom_center.setTextColor(Color.parseColor("#b2b2b2")); break; } } }); } } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.main_image_center: mTabHost.setCurrentTab(2); break; default: break; } } }3.res文件夾下新建一個color文件夾,main_tabtextcolor.xml的代碼為:<?xml version="1.0" encoding="utf-8"?> 4.drawable文件夾下的tab_1_selector.xml、tab_2_selector.xml、tab_3_selector.xml、tab_4_selector.xml、tab_5_selector.xml代碼<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@drawable/nav_button_home_selected" /> <item android:state_pressed="true" android:drawable="@drawable/nav_button_home_selected" /> <item android:state_selected="false" android:drawable="@drawable/nav_button_home_default" /> selector> 源碼地址:https://github.com/LXLYHM/Demo_FragmentTabhost到這里就結束啦。往期精彩回顧:
HomeFragment.class, MessageFragment.class,?CenterFragment.class, FinancialFragment.class,MineFragment.class3.接下來最重要的代碼類MainActivity.java:public class MainActivity extends FragmentActivity implements OnClickListener { private FragmentTabHost mTabHost; //mTabHost控件 private Class[] clas = new Class[] { HomeFragment.class, MessageFragment.class, CenterFragment.class, FinancialFragment.class, MineFragment.class }; //片段 private int images[] = new int[] {R.drawable.tab_1_selector, R.drawable.tab_2_selector,1, R.drawable.tab_4_selector, R.drawable.tab_5_selector }; //tab按鈕 選中和不選中狀態 private TextView mBottom_center; //中間按鈕TextView private ImageView main_image_center; //中間按鈕ImageView @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initUI(); } public void initUI() { //底部中間按鈕控件 main_image_center = (ImageView) findViewById(R.id.main_image_center); main_image_center.setImageResource(R.drawable.nav_button_finance_default); //底部中間按鈕TextView mBottom_center = (TextView) findViewById(R.id.main_tv_final); //設置監聽 main_image_center.setOnClickListener(this); mBottom_center.setOnClickListener(this); String[] tabIndicatorArray = getResources().getStringArray(R.array.arr_tab_indicator); mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost); mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent); LayoutInflater inflater = getLayoutInflater(); for (int i = 0; i < images.length; i++) { View indicatorView = inflater.inflate(R.layout.g_list_item_viewpagerindicator, null); TextView tvIndicator = (TextView) indicatorView.findViewById(R.id.tv_title_indicator); tvIndicator.setText(tabIndicatorArray[i]); ImageView imageView = (ImageView) indicatorView.findViewById(R.id.ima_indicator); imageView.setImageResource(images[i]); //tabhost添加tab切換事件 tab0-tab4 mTabHost.addTab(mTabHost.newTabSpec("tab"+i).setIndicator(indicatorView), clas[i], null); mTabHost.setOnTabChangedListener(new OnTabChangeListener() { @Override public void onTabChanged(String tabId) { switch (tabId) { case "tab2": //獲取中間按鈕點擊事件 設置覆蓋控件 main_image_center.setImageResource(R.drawable.nav_button_finance_selected); mBottom_center.setTextColor(Color.parseColor("#ffd38a")); break; default: //其他四個按鈕 main_image_center.setImageResource(R.drawable.nav_button_finance_default); mBottom_center.setTextColor(Color.parseColor("#b2b2b2")); break; } } }); } } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.main_image_center: mTabHost.setCurrentTab(2); break; default: break; } } }3.res文件夾下新建一個color文件夾,main_tabtextcolor.xml的代碼為:<?xml version="1.0" encoding="utf-8"?> 4.drawable文件夾下的tab_1_selector.xml、tab_2_selector.xml、tab_3_selector.xml、tab_4_selector.xml、tab_5_selector.xml代碼<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@drawable/nav_button_home_selected" /> <item android:state_pressed="true" android:drawable="@drawable/nav_button_home_selected" /> <item android:state_selected="false" android:drawable="@drawable/nav_button_home_default" /> selector> 源碼地址:https://github.com/LXLYHM/Demo_FragmentTabhost到這里就結束啦。往期精彩回顧:
Android實現短信驗證碼自動填充功能
Android仿echo精美彈幕功能
Android實現頭像重疊排列功能
Android仿QQ個性標簽功能
Android仿QQ側滑刪除的功能
總結
以上是生活随笔為你收集整理的android 4个点矫正不规则矩形_Android使用FragmentTabHost实现中间按钮凸出效果的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: docker安装elasticsearc
- 下一篇: in 用不用索引_MySQL 索引最佳实