仿照网易云音乐界面
IT蓝豹
9年前
仿照网易云音乐界面
仿照网易云音乐界面 ,页面UI实现的听不错的,学习ui的朋友可以下载下来研究研究,
项目大体框架,由ViewPager和TabContentPagerAdapter实现顶部的左右滑动切换view.
右侧滑动DrawerLayout 实现左右滑动。
项目大体实现:
package me.xoder.neteasy.activity; import android.app.ActionBar; import android.app.FragmentTransaction; import android.content.res.TypedArray; import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.support.v4.widget.DrawerLayout; import android.util.Log; import android.view.Gravity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.ImageView; import java.lang.reflect.Method; import me.xoder.neteasy.R; import me.xoder.neteasy.adapter.TabContentPagerAdapter; public class MainActivity extends FragmentActivity { private ViewPager mViewPager; private DrawerLayout slideMenu; private ActionBar actionBar; private TabContentPagerAdapter mPagerAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); actionBar = getActionBar(); mViewPager = (ViewPager) findViewById(R.id.view_pager); slideMenu = (DrawerLayout) findViewById(R.id.slide_menu); slideMenu.setScrimColor(Color.argb(50, 0, 0, 0)); mPagerAdapter = new TabContentPagerAdapter(getSupportFragmentManager()); mViewPager.setAdapter(mPagerAdapter); mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { @Override public void onPageSelected(int position) { actionBar.setSelectedNavigationItem(position); } }); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); ActionBar.TabListener tabListener = new ActionBar.TabListener() { @Override public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) { mViewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) { } @Override public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) { } }; TypedArray tabIconIds = getResources().obtainTypedArray(R.array.actionbar_icons); for (int i = 0; i < 3; i++) { View view = getLayoutInflater().inflate(R.layout.actionbar_tab, null); ImageView tabIcon = (ImageView) view.findViewById(R.id.actionbar_tab_icon); tabIcon.setImageResource(tabIconIds.getResourceId(i, -1)); actionBar.addTab(actionBar.newTab().setCustomView(view).setTabListener(tabListener)); } enableEmbeddedTabs(actionBar); } /** * 在actionbar中内嵌Tab * * @param actionBar actionbar */ private void enableEmbeddedTabs(android.app.ActionBar actionBar) { try { Method setHasEmbeddedTabsMethod = actionBar.getClass().getDeclaredMethod("setHasEmbeddedTabs", boolean.class); setHasEmbeddedTabsMethod.setAccessible(true); setHasEmbeddedTabsMethod.invoke(actionBar, true); } catch (Exception e) { Log.v("enableEmbeddedTabs", e.getMessage().toString()); } } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { int id = item.getItemId(); if (id == R.id.action_search) { // TODO: 2015-07-25 搜索界面 } else if (id == R.id.action_menu) { // TODO: 2015-07-25 菜单选择 if (slideMenu.isDrawerOpen(Gravity.RIGHT)) { slideMenu.closeDrawer(Gravity.RIGHT); } else { slideMenu.openDrawer(Gravity.RIGHT); } } return true; } } ////////////////// package me.xoder.neteasy.activity; import android.annotation.TargetApi; import android.app.ActionBar; import android.os.Build; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentTransaction; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.FrameLayout; import me.xoder.neteasy.R; import me.xoder.neteasy.fragment.discover.fm.CoverFragment; import me.xoder.neteasy.fragment.discover.fm.LyricFragment; /** * Created by alex.lee on 2015-07-29. */ public class PersonalFMActivity extends FragmentActivity { private ActionBar actionBar; private Fragment fgTo; private Fragment fgCover; private Fragment fgLyric; private boolean fgFlag = false; private FrameLayout frameContainer; @TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR2) @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_personal_fm); actionBar = getActionBar(); actionBar.setTitle("私人FM"); actionBar.setDisplayShowTitleEnabled(true); actionBar.setDisplayUseLogoEnabled(true); actionBar.setDisplayHomeAsUpEnabled(true); actionBar.setDisplayShowHomeEnabled(true); actionBar.setLogo(R.drawable.actionbar_logo); actionBar.setHomeAsUpIndicator(R.drawable.rdi_icn_arr); if (fgCover == null) { fgCover = new CoverFragment(); } if (!fgCover.isAdded()) { getSupportFragmentManager().beginTransaction().add(R.id.frame_fm_container, fgCover, CoverFragment.class.getSimpleName()).commit(); } fgTo = fgCover; frameContainer = (FrameLayout) findViewById(R.id.frame_fm_container); frameContainer.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (fgFlag) { if (fgCover == null) { fgCover = new CoverFragment(); } switchFragment(fgTo, fgCover); } else { if (fgLyric == null) { fgLyric = new LyricFragment(); } switchFragment(fgTo, fgLyric); } fgFlag = !fgFlag; } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_personal_fm, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { int id = item.getItemId(); switch (id) { case android.R.id.home: finish(); break; } return true; } public void switchFragment(Fragment from, Fragment to) { if (from == null || to == null || from == to) { return; } FragmentTransaction transaction = getSupportFragmentManager().beginTransaction(); transaction.setCustomAnimations(R.anim.abc_fade_in, R.anim.abc_fade_out); if (!to.isAdded()) { // 隐藏当前的fragment,add下一个到Activity中 transaction.hide(from).add(R.id.frame_fm_container, to).commit(); } else { // 隐藏当前的fragment,显示下一个 transaction.hide(from).show(to).commit(); } fgTo = to; } }
文章来源《IT蓝豹》android特效分享