主界面開發
是由fragment+ViewPager組成。
分為網絡歌曲和本地歌曲。
首先，將main_activity.xml寫好。添加Viewpager
第二步，就要在layout中添加兩個佈局文件。
分別為fragment_local.xml和fragment_network.xml。
這就是你要展示的滑動後不同的兩個界面。
接下來，就是寫Fragment 的adapter。
繼承 FragmentPagerAdapter，然後重寫兩個方法。
寫一個構造器，將fragment集合傳入。
public class FragmentAdapter extends FragmentPagerAdapter {
List fragments = new ArrayList<>();
public FragmentAdapter(FragmentManager fm, List fragmentList) {
super(fm);
this.fragments=fragmentList;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
}
然後，就可以寫兩個Fragment的Java代碼瞭。
這裡就可以當成Activity來寫。（稍微有的地方會有區別）
繼承Frgement。然後通過onCreateView（） 綁定佈局文件。
這個方法相當於Activity的 onCreate（）。數據的初始化以及界面的加載寫在這裡面。
public class NetFragment extends Fragment {
@Bind(R.id.et_findlocal)
EditText etFindlocal;
@Bind(R.id.main_gridview)
GridView mainGridview;
private SparseArray gridItems = new SparseArray();
private Map maps = new HashMap();
MusicGridAdapter musicGridAdapter;
private Dialog progressDialog;
Banner banner;
private List images;
private List strings;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_network, container, false);
banner = view.findViewById(R.id.banner);
initData();
banner.setImageLoader(new GlideImagerLoader());
banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);
banner.setImages(images);
banner.setBannerTitles(strings);
banner.isAutoPlay(true);
banner.setDelayTime(2000);
banner.start();
musicGridAdapter = new MusicGridAdapter(gridItems, getContext());
mainGridview = view.findViewById(R.id.main_gridview);
mainGridview.setAdapter(musicGridAdapter);
mainGridview.setOnItemClickListener(new mainGridviewListener());
ButterKnife.bind(this, view);
return view;
}
}
最後就是寫MainActivity。
將兩個Fragment通過適配器添加到Viewpager裡面去。
public class MainActivity extends AppCompatActivity {
@Bind(R.id.tb_main)
Toolbar tbMain;
@Bind(R.id.tv_local)
TextView tvLocal;
@Bind(R.id.tv_network)
TextView tvNetwork;
@Bind(R.id.vv_main)
LinearLayout vvMain;
@Bind(R.id.vp_main)
ViewPager vpMain;
@Bind(R.id.iv_down)
ImageView ivDown;
@Bind(R.id.iv_setting)
ImageView ivSetting;
private FragmentAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
StatusBarCompat.setStatusBarColor(this, Color.parseColor("#da3318"));
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
List fragments = new ArrayList<>();
fragments.add(new NetFragment());
fragments.add(new LocalFragment());
}
View Pager滑動
這裡是關於那個紅色條的滑動實現。
首先，在 佈局文件添加
定義兩個全局變量，分別記錄當前為哪個Fragment以及屏幕的寬度。
private int currentIndex;
private int screenWidth;
由於兩邊都要留空白，所以通過getWindowManager().getDefaultDisplay().getWidth() 獲取屏幕的寬度後還要減去20dp。
通過LinearLayout.LayoutParams設置屬性。
將其寬度設為屏幕寬度的一半。
screenWidth = getWindowManager().getDefaultDisplay().getWidth() - dip2px(this, 20);
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) vvMain.getLayoutParams();
lp.width = screenWidth / 2;
vvMain.setLayoutParams(lp);
定義一個方法將dp換成px。
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
接下來就是給ViewPager設置一個監聽。
當其position變化後，相應的改變紅線距離左邊的寬度。
並改變相應字體的顏色。
vpMain.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) vvMain.getLayoutParams();
if (currentIndex == 0 && position == 0)// 0->1
{
lp.leftMargin = (int) (positionOffset * screenWidth / 2);
} else if (currentIndex == 1 && position == 0) {
lp.leftMargin = (int) ((1 + positionOffset) * screenWidth / 4);
}
vvMain.setLayoutParams(lp);
}//滑動時，紅線隨著位移偏移量positionOffset移動。
@Override
public void onPageSelected(int position) {
if (position == 0) {
tvLocal.setTextColor(Color.parseColor("#da3318"));
tvNetwork.setTextColor(Color.BLACK);
currentIndex = 0;
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) vvMain.getLayoutParams();
lp.leftMargin = 0;
vvMain.setLayoutParams(lp);
} else if (position == 1) {
tvLocal.setTextColor(Color.BLACK);
tvNetwork.setTextColor(Color.parseColor("#da3318"));
currentIndex = 1;
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) vvMain.getLayoutParams();
lp.leftMargin = screenWidth / 4;
vvMain.setLayoutParams(lp);
}
}//滑動後顏色改變。
@Override
public void onPageScrollStateChanged(int state) {
}
});
最後是初始化。
vpMain.setCurrentItem(0);
tvLocal.setTextColor(Color.parseColor("#da3318"));
tvNetwork.setTextColor(Color.BLACK);
currentIndex = 0;
如果需要添加點擊效果，隻需要在點擊事件中setCurrentItem（）即可。
case R.id.tv_local:
vpMain.setCurrentItem(0);
break;
case R.id.tv_network:
vpMain.setCurrentItem(1);
break;
標題欄的隱藏和狀態欄的改變
標題欄的隱藏
在AndroidManifest.xml中設置。
//對！就是這裡~
進入我們的values~
在styles.xml中添加相對應的主題。
//這一行~~~
@color/colorPrimary
@color/colorPrimaryDark
@color/colorAccent
狀態欄的改變
在build.gradle中添加依賴。
dependencies {
compile 'com.github.niorgai:StatusBarCompat:2.1.1'
}
再在Activity中加入一行代碼。
註意，這裡必須加在 setContentView(R.layout.activity_main);之前。
StatusBarCompat.setStatusBarColor(this, Color.parseColor("#da3318"));
StatusBarCompat.translucentStatusBar（this)；//透明
setContentView(R.layout.activity_main);