源碼暫時不會給，因為此應用部落客是要制作出來上線的，而且現在隻做了一部分
效果圖：
思路：
1.程式由一個Activity和多個Fragment組成
2.程式第一次進入時先進入引導界面，然後進入主界面。以後每次都是先進入歡迎界面,然後進入主界面
3.引導界面由ViewPager構成，在最後一個page上設定一個開始使用按鈕，點選按鈕就能進入首頁面
4.首頁面三頁分欄，包括首頁，消息和我的。禁用滑動
5.“首頁”裡面是天氣的資訊，主體結構是一個ViewPager,如果添加了城市，就可以滑動看添加城市的天氣情況。
6.“我的“裡面包括登陸，注冊，以及一些常用的設定
三頁分欄的實作：
1.bottom_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/tab_bg"
>
<LinearLayout
android:id="@+id/lin0"
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:id="@+id/weather_tab"
android:layout_width="35dp"
android:layout_height="35dp"
android:src="@mipmap/tab_pressed_1"/>
<TextView
android:id="@+id/weather_tab_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/tab_text_color"
android:text="@string/weather_tab_text"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/lin2"
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:id="@+id/message_tab"
android:layout_width="35dp"
android:layout_height="35dp"
android:src="@mipmap/tab_normal_3"/>
<TextView
android:id="@+id/message_tab_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/tab_text_color"
android:text="@string/message_tab_text"/>
</LinearLayout>
<LinearLayout
android:id="@+id/lin3"
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:id="@+id/my_tab"
android:layout_width="35dp"
android:layout_height="35dp"
android:src="@mipmap/tab_normal_4"/>
<TextView
android:id="@+id/my_tab_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/my_tab_text"
android:textColor="@color/tab_text_color"
/>
</LinearLayout>
</LinearLayout> 2.點選效果的實作
public class MainFragment extends Fragment implements View.OnClickListener{
private View mainView;
//viewPager
private TabViewPager tabViewPager;
//底部tab
private View layoutView;
private ImageView tab_weather,tab_city,tab_message,tab_my;
private TextView tab_weather_text,tab_city_text,tab_message_text,tab_my_text;
//tabViewPager的擴充卡
private TabPagerAdapter adapter;
private FragmentManager manager;
//資料
private ArrayList<Fragment> fragList=new ArrayList<>();
private WeatherFragment weatherFragment;
private CityFragment cityFragment;
private MessageFragment messageFragment;
private MyFragment myFragment;
private LinearLayout lin1,lin2,lin3,lin0;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
mainView=inflater.inflate(R.layout.fragment_main,container,false);
if (fragList.size()==0){
}
else{
fragList.clear();
Log.i("info2","不為0"+fragList.size());
}
initView();
getData();
setAdatper();
setOnListener();
return mainView;
}
@Override
public void onResume() {
super.onResume();
}
/**
* 初始化控件
*/
public void initView(){
tabViewPager= (TabViewPager) mainView.findViewById(R.id.tab_viewPager);
layoutView=mainView.findViewById(R.id.bottom_tab);
tab_weather= (ImageView) layoutView.findViewById(R.id.weather_tab);
tab_weather_text= (TextView) layoutView.findViewById(R.id.weather_tab_text);
tab_message= (ImageView) layoutView.findViewById(R.id.message_tab);
tab_message_text= (TextView) layoutView.findViewById(R.id.message_tab_text);
tab_my= (ImageView) layoutView.findViewById(R.id.my_tab);
tab_my_text= (TextView) layoutView.findViewById(R.id.my_tab_text);
lin0= (LinearLayout) layoutView.findViewById(R.id.lin0);
lin2= (LinearLayout) layoutView.findViewById(R.id.lin2);
lin3= (LinearLayout) layoutView.findViewById(R.id.lin3);
}
/**
* 為tabViewPager設定擴充卡
*/
public void setAdatper(){
tabViewPager.setOffscreenPageLimit(fragList.size()-1);
manager=getActivity().getSupportFragmentManager();
adapter=new TabPagerAdapter(manager,fragList);
tabViewPager.setAdapter(adapter);
}
/**
* 獲得資料
*/
public void getData(){
weatherFragment = new WeatherFragment();
messageFragment=new MessageFragment();
myFragment=new MyFragment();
fragList.add(weatherFragment);
fragList.add(messageFragment);
fragList.add(myFragment);
}
/**
* 設定監聽
*/
public void setOnListener() {
lin0.setOnClickListener(this);
lin2.setOnClickListener(this);
lin3.setOnClickListener(this);
//為tabViewPager設定監聽
tabViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
resetView();
switch (position) {
case 0:
tab_weather.setImageResource(R.mipmap.tab_pressed_1);
tab_weather_text.setTextColor(ContextCompat.getColor(getContext(), R.color.tab_text_color_pressed));
break;
case 1:
tab_city.setImageResource(R.mipmap.tab_pressed_2);
tab_city_text.setTextColor(ContextCompat.getColor(getContext(), R.color.tab_text_color_pressed));
break;
case 2:
tab_message.setImageResource(R.mipmap.tab_pressed_3);
tab_message_text.setTextColor(ContextCompat.getColor(getContext(), R.color.tab_text_color_pressed));
break;
case 3:
tab_my.setImageResource(R.mipmap.tab_pressed_4);
tab_my_text.setTextColor(ContextCompat.getColor(getContext(), R.color.tab_text_color_pressed));
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
/**
* 按鈕的點選事件監聽
* @param v
*/
@Override
public void onClick(View v) {
resetView();
switch (v.getId()){
case R.id.lin0:
tab_weather.setImageResource(R.mipmap.tab_pressed_1);
tab_weather_text.setTextColor(ContextCompat.getColor(getContext(), R.color.tab_text_color_pressed));
tabViewPager.setCurrentItem(0);
break;
// case R.id.lin1:
// tab_city.setImageResource(R.mipmap.tab_pressed_2);
// tab_city_text.setTextColor(ContextCompat.getColor(getContext(), R.color.tab_text_color_pressed));
// tabViewPager.setCurrentItem(1);
// break;
case R.id.lin2:
tab_message.setImageResource(R.mipmap.tab_pressed_3);
tab_message_text.setTextColor(ContextCompat.getColor(getContext(), R.color.tab_text_color_pressed));
tabViewPager.setCurrentItem(2);
break;
case R.id.lin3 :
tab_my.setImageResource(R.mipmap.tab_pressed_4);
tab_my_text.setTextColor(ContextCompat.getColor(getContext(), R.color.tab_text_color_pressed));
tabViewPager.setCurrentItem(3);
break;
}
}
/**
* 每次滑動viewPager前 重置view
*/
public void resetView(){
tab_weather.setImageResource(R.mipmap.tab_normal_1);
// tab_city.setImageResource(R.mipmap.tab_normal_2);
tab_message.setImageResource(R.mipmap.tab_normal_3);
tab_my.setImageResource(R.mipmap.tab_normal_4);
// tab_weather_text.setTextColor(getResources().getColor(R.color.tab_text_color)); 6.0 方法棄用
tab_weather_text.setTextColor(ContextCompat.getColor(getContext(),R.color.tab_text_color));
// tab_city_text.setTextColor(ContextCompat.getColor(getContext(),R.color.tab_text_color));
tab_message_text.setTextColor(ContextCompat.getColor(getContext(),R.color.tab_text_color));
tab_my_text.setTextColor(ContextCompat.getColor(getContext(),R.color.tab_text_color));
}