android音乐播放器 第一天
今天开始做一个音乐播放器的欢迎界面,这是第一天,也是博主第一次发博客,写的不好,请亲喷。还有若某些地方写得不好,有错误或有更方便的实现方法,请提出,不胜感激。由于博主才大二,刚接触不久,也希望大神们多多照顾哟。呵呵~
现在开始吧。
先上效果图。
晕 效果图传不上来。手机渣,一直root失败,无法截屏,说声抱歉。大致是这样个效果。
用ViewPager做的滑动效果。最底下还有小点,在不同的界面,小点的颜色不一样。
在最后面一个Button,用于进入主界面。
先是去掉标题和全屏显示。
requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); //这里注意下,必须把上面2句放在setcontentview之前,不然会报错
然后在login.xml中,写出ViewPager
<android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_gravity="center" > </android.support.v4.view.ViewPager>
这个login.xml是和欢迎界面LogIn匹配的。
所以
setContentView(R.layout.login);
要实现3张图片,滑动的话,除了一个主布login.xml外,还写了3个xml,用于显示3张图片。分别是view1.xml,view2.xml,view3.xml
每个xml中都只有一个ImageView控件
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/iv1" />
现在布局文件好了,继续在LogIn的OnCreat()中操作。
//先声明ViewPager ViewPager viempager=(ViewPager)this.findViewById(R.id.viewpager); //用LayoutInflater加载布局xml LayoutInflater li=LayoutInflater.from(this); View view1=li.inflate(R.layout.view1, null); View view2=li.inflate(R.layout.view2, null); View view3=li.inflate(R.layout.view3, null); /动态设置view里面的ImageView //先声明 ImageView iv1=(ImageView)view1.findViewById(R.id.iv1); ImageView iv2=(ImageView)view2.findViewById(R.id.iv2); ImageView iv3=(ImageView)view3.findViewById(R.id.iv3); //再设置 iv1.setImageBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.guide1)); iv2.setImageBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.guide2)); iv3.setImageBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.guide3));
现在已经获得了3个布局文件对象,之后要把它存起来
//用ArrayList来存放View final ArrayList<View> views=new ArrayList<View>(); views.add(view1); views.add(view2); views.add(view3);
然后就是为ViewPager加适配器了。要重下个方法,分别是isViewFromObject(),
getCount(), destroyItem(), instantiateItem()。
PagerAdapter pageradapter=new PagerAdapter() { //重写的方法 @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0==arg1; } @Override public int getCount() { // TODO Auto-generated method stub return views.size(); } @Override public void destroyItem(View container, int position, Object object) { ((ViewPager)container).removeView(views.get(position)); } @Override public Object instantiateItem(View container, int position) { ((ViewPager)container).addView(views.get(position)); return views.get(position); } };
最后
//绑定适配器 viempager.setAdapter(pageradapter);
那么3张图片的连续滑动的效果基本做成了。
但是接下来,我在我手机上调试,发现图片是无法匹配屏幕的,无法全屏显示,就算所有控件的都设为fill_parent。手机的分辨率不同,无法适应图片,要是在
平板上运行,那就非常小。虽然android中有很多drawable,但我这中PS烂的,觉得代价太大了。所以接下来,
用代码改变了图片的大小和当前手机分辨率一样。
首先 获取手机的分辨率。
//获取屏幕分辨率 DisplayMetrics dm=new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); int srceenw=dm.widthPixels;//宽 int srceenh=dm.heightPixels;//高
然后用Bitmap.createBitmap(),重新创建图片
其函数为
//改变图片函数 public static Bitmap resizeBitmap(Bitmap bitmap, int w, int h) { if (bitmap != null) { int width = bitmap.getWidth(); int height = bitmap.getHeight(); int newWidth = w; int newHeight = h; float scaleWidth = ((float) newWidth) / width; float scaleHeight = ((float) newHeight) / height; Matrix matrix = new Matrix(); matrix.postScale(scaleWidth, scaleHeight); Bitmap resizedBitmap = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true); return resizedBitmap; } else { return null; }
只要把图片和想要的大小传进去就行。
所以先导入资源
Bitmap log1=BitmapFactory.decodeResource(getResources(), R.drawable.guide1);//guide1就是那三张图片 Bitmap log2=BitmapFactory.decodeResource(getResources(), R.drawable.guide2); Bitmap log3=BitmapFactory.decodeResource(getResources(), R.drawable.guide3); //改变图片大小函数 Bitmap nlog1=resizeBitmap(log1, srceenw, srceenh); Bitmap nlog2=resizeBitmap(log2, srceenw, srceenh); Bitmap nlog3=resizeBitmap(log3, srceenw, srceenh);
现在已经得到想要的图片大小了
讲上面的ImageView的显示图片重新改了换成nlog1,nlog2,nlog3
/动态设置view里面的ImageView //先声明 ImageView iv1=(ImageView)view1.findViewById(R.id.iv1); ImageView iv2=(ImageView)view2.findViewById(R.id.iv2); ImageView iv3=(ImageView)view3.findViewById(R.id.iv3); //再设置 iv1.setImageBitmap(nlog1); iv2.setImageBitmap(nlog2); iv3.setImageBitmap(nlog3);
这样就实现全屏了。
最后我们来处理最底下的小圆点。
在login.xml中
<android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_gravity="center" > </android.support.v4.view.ViewPager> <LinearLayout android:id="@+id/point" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="10.0dip" android:orientation="horizontal"> android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="15.0dip" android:src="@drawable/point"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="15.0dip" android:src="@drawable/point"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="15.0dip" android:src="@drawable/point"/> </LinearLayout>
这里注意了,有个@drawable/point,这个是什么呢?
这是写的一个drawable的xml,point.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:drawable="@drawable/guide_dot_normal" /> <item android:state_enabled="false" android:drawable="@drawable/guide_dot_selected" /> </selector>
可以看出,当状态为true时,dot小圆点的显示为normal,及黑色。
当为false,dot显示的是白色,图片为guide_dot_selected;
接下了,这么实现上面的效果呢?
当然要判断当前的页面是哪个.
当时第一个页面,第一个原点是白色的,其他是黑色的。
所以我们要判断当前页面。
需要在当前Activity中implements OnPageChangeListener()。
重新3个方法,只需用到一个 onPageSelected()
@Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageSelected(int arg0) { // TODO Auto-generated method stub //当被选中 setCurrentDot(arg0); //这里的就是根据当前页面,设置dot小圆点。 }
接下来实现小圆点的具体实现
// 底部小点图片 private ImageView[] dots; // 记录当前选中位置 private int currentIndex; private void initDots() { LinearLayout point = (LinearLayout) findViewById(R.id.point); //获取point; dots = new ImageView[3]; // 循环取得小点图片 for (int i = 0; i < 3; i++) { dots[i] = (ImageView) point.getChildAt(i); //这个函数是从point中根据编号读相应的ImageView dots[i].setEnabled(true);// 都设为黑色 } currentIndex = 0; dots[currentIndex].setEnabled(false);// 设置为白色,即选中状态 } private void setCurrentDot(int position) { dots[position].setEnabled(false); dots[currentIndex].setEnabled(true); currentIndex = position; }
在viempager.setAdapter(pageradapter);后
/绑定回调 viempager.setOnPageChangeListener(this); //初始化小点 initDots();
这样带有移动效果的小圆点就完成了。
然后就是在第三个View中添加的个按钮,欢迎界面的完成了。
这是开发这播放器的第一天,之后会随时把最新的功能和效果,发表出来。
博主经验少,若有好的意见,希望广大博友提出来。就这样了,下次见。