频道栏目
首页 > 程序开发 > 移动开发 > Android > 正文
Android 超简单音乐播放器主界面开发(fragment+ViewPage)(View Pager滑动)( 标题栏的隐藏和状态栏的改变)
2017-11-14 10:33:55      个评论    来源:奇妙能力倩  
收藏   我要投稿

主界面开发

是由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中添加相对应的主题。



    


状态栏的改变

在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);
点击复制链接 与好友分享!回本站首页
上一篇:Android开发之SendSMS短信管理器实现教程
下一篇:最后一页
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站