仿windows phone風格主界面

時間 2019-11-20

原文原文鏈接

使用了ZAKER到最新版本，其主界面採用windows phone的風格，感受還蠻好看的，挺喜歡的，就模仿寫了一下，實現到界面截圖以下：java

初版面：android

第二版面：canvas

在實現了它到九宮格菜單，還實現了背景圖片到緩慢移動效果。windows

首先來分析一下它到整個佈局架構，咱們確定知道它必須是採用到FrameLayout佈局，最下面到是背景圖片視圖，上面的是線性佈局來裝下左右兩個面板，左邊到是一個能夠滾動的容器，右邊放一個頁碼和四個按鈕。架構

那麼怎麼實現背景圖片的不斷循環滾動呢？既然是顯示圖片的，那麼天然離不開ImageView，因此在這裏咱們自定義一個MyImageView，它來繼承ImageView，在它裏面經過使用Handler消息處理機制+Timer計時器來控制圖片的顯示位置。app

在這裏，我使用了android.support.v4.view.ViewPager來實現可滑動到宮格菜單，自定義一個MyPagerAdapter繼承PagerAdapter，在instantiateItem方法中配置顯示參數。ide

大概原理就是這樣，挺簡單的，下面分享一下代碼吧：函數

工程目錄結構：佈局

一. src/com/example/zakerdemo下面的類：this

MainActivity.java：

package com.example.zakerdemo;

import java.util.ArrayList;
import com.example.zakerdemo.R;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {
    ArrayList<ImageInfo> data; // 菜單數據
    private static TextView mynum; // 頁碼

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mynum = (TextView) findViewById(R.id.mynum);
        // 初始化數據
        initData();
        ViewPager vpager = (ViewPager) findViewById(R.id.vPager);
        vpager.setAdapter(new MyPagerAdapter(MainActivity.this, data));
        vpager.setPageMargin(50);
        vpager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                mynum.setText("" + (int) (arg0 + 1));
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

    private void initData() {
        data = new ArrayList<ImageInfo>();
        mynum.setText("1");
        data.add(new ImageInfo("今日看點", R.drawable.icon1, R.drawable.icon_bg01));
        data.add(new ImageInfo("新浪微博", R.drawable.icon2, R.drawable.icon_bg01));
        data.add(new ImageInfo("個人收藏", R.drawable.icon3, R.drawable.icon_bg01));
        data.add(new ImageInfo("新聞頭條", R.drawable.icon4, R.drawable.icon_bg02));
        data.add(new ImageInfo("科技頻道", R.drawable.icon5, R.drawable.icon_bg02));
        data.add(new ImageInfo("汽車頻道", R.drawable.icon6, R.drawable.icon_bg02));
        data.add(new ImageInfo("軍事頻道", R.drawable.icon7, R.drawable.icon_bg02));
        data.add(new ImageInfo("新華炫文", R.drawable.icon8, R.drawable.icon_bg02));
        data.add(new ImageInfo("ͨ娛樂八卦", R.drawable.icon9, R.drawable.icon_bg02));
        data.add(new ImageInfo("體育新聞", R.drawable.icon10, R.drawable.icon_bg02));
        data.add(new ImageInfo("互聯網新聞", R.drawable.icon11, R.drawable.icon_bg02));
        data.add(new ImageInfo("奢侈品頻道", R.drawable.icon12, R.drawable.icon_bg02));
        data.add(new ImageInfo("時尚頻道", R.drawable.icon13, R.drawable.icon_bg02));
        data.add(new ImageInfo("財經頻道", R.drawable.icon14, R.drawable.icon_bg02));
        data.add(new ImageInfo("財經新聞", R.drawable.icon15, R.drawable.icon_bg02));
        data.add(new ImageInfo("福布斯中文網", R.drawable.icon16,
                R.drawable.icon_bg02));
        data.add(new ImageInfo("旅遊頻道", R.drawable.icon3, R.drawable.icon_bg02));
        data.add(new ImageInfo("遊戲頻道", R.drawable.icon8, R.drawable.icon_bg02));
        data.add(new ImageInfo("開心笑話", R.drawable.icon10, R.drawable.icon_bg02));

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

ImageInfo.java：

package com.example.zakerdemo;

/**
 * 圖像實體類
 * @author wulianghuan
 *
 */
public class ImageInfo {

    public String imageMsg;        //菜單標題
    public int imageId;            //logo圖片資源
    public int bgId;            //背景圖片資源

    public ImageInfo(String msg, int id1,int id2) {
        imageId = id1;
        imageMsg = msg;
        bgId = id2;
    }
}

MyImageView.java：

package com.example.zakerdemo;

import java.util.Timer;
import java.util.TimerTask;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

/**
 * @author wulianghuan
 * 該類爲自定義ImageView，用於顯示背景圖片，並顯示背景圖片到移動效果
 *
 */
public class MyImageView extends ImageView{
    private Bitmap back;        //背景圖片資源
    private Bitmap mBitmap;        //生成位圖    
    private double startX = 0;    //移動起始X座標
    
    //構造函數中必須有context,attributeSet這兩個    參數，不然父類沒法調用
    public MyImageView(Context context,AttributeSet attributeSet)
    {
        super(context, attributeSet);
        //因爲不是Activity子類，只能經過DisplayMetrics來獲取屏幕信息
        DisplayMetrics dm = getResources().getDisplayMetrics();
        //屏幕寬度
        int screenWidth = dm.widthPixels;  
        //屏幕高度
        int screenHeight = dm.heightPixels;      
        
        back = BitmapFactory.decodeResource(context.getResources(), R.drawable.rootblock_default_bg);
        
        mBitmap = Bitmap.createScaledBitmap(back, screenWidth*3, screenHeight, true);    
        
        
        final Handler handler = new Handler()
        {
            public void handleMessage(Message msg)
            {
                if (msg.what == 1)
                {
                    Log.i("TAG", "-----"+startX);
                    if (startX <= -80)
                    {
                        startX = 0;
                    }
                    else
                    {
                        startX -= 0.09;
                    }
                }
                invalidate();
            }
        };
        new Timer().schedule(new TimerTask()
        {
            @Override
            public void run()
            {
                handler.sendEmptyMessage(1);
            }
        }, 0 , 10);
        
    }
    
    @Override
    public void onDraw(Canvas canvas)
    {
        Log.i("TAG", "-----onDraw");
        Bitmap bitmap2 = Bitmap.createBitmap(mBitmap);
        canvas.drawBitmap(mBitmap, (float)startX , 0 , null);
    }
}

MyPagerAdapter.java：

package com.example.zakerdemo;

import java.util.ArrayList;
import com.example.zakerdemo.R;
import android.app.Activity;
import android.content.Context;
import android.os.Vibrator;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.WindowManager;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemLongClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
 * 自定義適配器
 * @author wulianghuan
 *
 */
public class MyPagerAdapter extends PagerAdapter {
    Vibrator vibrator;
    ArrayList<ImageInfo> data;
    Activity activity;
    LayoutParams params;

    public MyPagerAdapter(Activity activity, ArrayList<ImageInfo> data) {
        this.activity = activity;
        this.data = data;
        vibrator = (Vibrator) activity
                .getSystemService(Context.VIBRATOR_SERVICE);
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return 2;
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        // TODO Auto-generated method stub
        return arg0 == arg1;
    }

    @Override
    public Object instantiateItem(ViewGroup container, final int index) {
        Log.v("test", index + "index");

        View view = activity.getLayoutInflater().inflate(R.layout.grid, null);
        GridView gridView = (GridView) view.findViewById(R.id.gridView1);
        gridView.setNumColumns(2);
        gridView.setVerticalSpacing(5);
        gridView.setHorizontalSpacing(5);
        gridView.setAdapter(new BaseAdapter() {

            @Override
            public int getCount() {
                return 8;
            }

            @Override
            public Object getItem(int position) {
                return position;
            }

            @Override
            public long getItemId(int position) {
                return position;
            }

            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                View item = LayoutInflater.from(activity).inflate(
                        R.layout.grid_item, null);
                ImageView iv = (ImageView) item.findViewById(R.id.imageView1);
                RelativeLayout relativeLayout = (RelativeLayout)item.findViewById(R.id.relativeLayout);
                iv.setImageResource((data.get(index * 8 + position)).imageId);
                relativeLayout.setBackgroundResource((data.get(index * 8 + position)).bgId);
                relativeLayout.getBackground().setAlpha(225);
                TextView tv = (TextView) item.findViewById(R.id.msg);
                tv.setText((data.get(index * 8 + position)).imageMsg);
                return item;
            }
        });

        gridView.setOnItemLongClickListener(new OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(AdapterView<?> arg0, View arg1,
                    int arg2, long arg3) {
                View view = arg1;
                arg1.setVisibility(View.INVISIBLE);
                params = new WindowManager.LayoutParams();
                vibrator.vibrate(2500);
                return true;
            }
        });
        ((ViewPager) container).addView(view);
        return view;
    }
}

二. layout下的佈局文件：

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
   
<FrameLayout 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    
        <com.example.zakerdemo.MyImageView
        android:id="@+id/rootbg"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY"/>
    
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">
            
            <LinearLayout 
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1">
                
                <android.support.v4.view.ViewPager
                    android:id="@+id/vPager"
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent" />
               
            </LinearLayout>
            
            <LinearLayout 
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical">
                
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center_horizontal">
                    
                    
                     <TextView
                        android:id="@+id/mynum"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentTop="true"
                        android:layout_marginTop="15dp"
                        android:layout_marginLeft="5dp"
                        android:gravity="center"
                        android:textStyle="bold"
                        android:textColor="@android:color/white"
                        android:background="@drawable/rootblock_pageinfo_blue_bg"/>
                    
                    <Button
                        android:id="@+id/add"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"
                        android:layout_marginBottom="40dp"
                        android:background="@drawable/rootblock_add_selector"/>
                    
                    <Button
                        android:id="@+id/set"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_above="@id/add"
                        android:layout_marginBottom="15dp"
                        android:background="@drawable/rootblock_set_selector"/>
                    
                    <Button
                        android:id="@+id/appstroe"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_above="@id/set"
                        android:layout_marginBottom="15dp"
                        android:background="@drawable/rootblock_appstroe_selector"/>
                    
                    <Button
                        android:id="@+id/download"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_above="@id/appstroe"
                        android:layout_marginBottom="15dp"
                        android:background="@drawable/rootblock_download_selector"/>
            </RelativeLayout>
            
         </LinearLayout>
                
    </LinearLayout>
    
</FrameLayout>
</LinearLayout>

grid.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <GridView
        android:id="@+id/gridView1"
        android:layout_width="fill_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="15dp"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/left"
        android:numColumns="2" >
    </GridView>

</RelativeLayout>

grid_item.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="120dip"
    android:layout_height="120dip"
    android:id="@+id/relativeLayout">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="60dp"
        android:layout_height="70dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp" />
    <TextView
        android:id="@+id/msg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView1"
        android:layout_centerHorizontal="true"
        android:paddingBottom="10dp"
        android:textColor="#ffffff" />

</RelativeLayout>

三. drawable下的xml文件：

rootblock_add_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="false"
        android:drawable="@drawable/rootblock_icon_add" />
        
    <item
        android:state_pressed="true"
        android:drawable="@drawable/rootblock_icon_add_selected" />
</selector>

rootblock_appstroe_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="false"
        android:drawable="@drawable/rootblock_icon_appstroe" />
    
    <item
        android:state_pressed="true"
        android:drawable="@drawable/rootblock_icon_appstroe_selected" />
</selector>

rootblock_download_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="false"
        android:drawable="@drawable/rootblock_icon_download" />
        
    <item
        android:state_pressed="true"
        android:drawable="@drawable/rootblock_icon_download_selected" />
</selector>

rootblock_set_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="false"
        android:drawable="@drawable/rootblock_icon_set" />
        
    <item
        android:state_pressed="true"
        android:drawable="@drawable/rootblock_icon_set_selected" />
</selector>

四. AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.zakerdemo"
    android:versionCode="1"
    android:versionName="1.0" >
    
    <supports-screens
        android:smallScreens="true"
        android:normalScreens="true"
        android:largeScreens="true"
        android:resizeable="true"
        android:anyDensity="true" />
    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="14" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.NoTitleBar" >
        <activity
            android:name="com.example.zakerdemo.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

轉載自：http://blog.csdn.net/wulianghuan/article/details/8892203

代碼下載地址：http://download.csdn.net/detail/wulianghuan/5338801

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。