仿照网易云音乐界面

IT蓝豹 8年前

仿照网易云音乐界面
 


仿照网易云音乐界面 ,页面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特效分享