自定義ShareSDK的分享界面

在上篇文章裏寫到ShareSDK的集成和使用方法，大家可以看到使用Mob裏ShareSDK爲我們默認提供的分享彈窗默認從底部彈出並且顯示在底部的位置，相對比較單調。不是那麼的漂亮。這時我們就想能否把分享的view居中顯示在手機中部，並且添加一些提示信息和一個取消分享按鈕。真強用戶的體驗性

默認的分享界面風格：

修改後的：

對比後是不是後者的分享界面更加的漂亮些呢。

好，咱們廢話不多說。實現第二個效果的方法實則是修改了ShareSDK裏兩個類的代碼。

1，首先進入到PlatformPagerAdapter類裏修改createPanel(Context context)方法：

private View createPanel(Context context) {
		LinearLayout llPanel = new LinearLayout(context);
		llPanel.setOrientation(LinearLayout.HORIZONTAL);
		//1,設置分享彈窗背景
		llPanel.setBackgroundColor(context.getResources().getColor(com.zt.dzdp.R.color.zdy_color));
		//2,設置圖片作爲背景
		//llPanel.setBackground(context.getDrawable(com.zt.dzdp.R.drawable.zdy_icon));

		...
}

可修改其分享背景爲一個顏色或一張圖片。

2，設置平臺的文字顏色：

好了到此，已經完成PlatformPagerAdapter類裏的初步修改。

3，分享界面的居中顯示，到PlatformPager類裏的onCreate()方法裏來修改：

(1),添加分享提示標題：

代碼：

  lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,130);
                lp.setMargins(0,0,0,0);
                LinearLayout buttonLayout = new LinearLayout(activity);
                buttonLayout.setBackgroundColor(Color.WHITE);
                
                LinearLayout.LayoutParams lp2 = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,110);
                lp2.setMargins(20, 20, 20, 0);
                TextView tv = new TextView(activity);
                tv.setGravity(Gravity.CENTER);
                tv.setText("~分享到~");
                tv.setTextSize(16);
                tv.setTextColor(Color.BLACK);
                tv.setBackgroundColor(Color.WHITE);
                buttonLayout.addView(tv,lp2);
                llPanel.addView(buttonLayout,lp);

(2)添加取消按鈕：

添加取消按鈕代碼：

  lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,150);
                lp.setMargins(0,0,0,0);
                LinearLayout buttonLayout2 = new LinearLayout(activity);
                buttonLayout2.setBackgroundColor(Color.WHITE);
                
                LinearLayout.LayoutParams lp22 = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,110);
                lp22.setMargins(20, 20, 20, 20);
                Button button2 = new Button(activity);
                button2.setText("取消分享");
                button2.setTextSize(16);
                button2.setTextColor(Color.BLACK);
                button2.setBackgroundColor(Color.GREEN);
                button2.setOnClickListener(new OnClickListener() {
                        
                        @Override
                        public void onClick(View v) {
                                // TODO Auto-generated method stub
                                finish();
                        }
                });
                buttonLayout2.addView(button2,lp22);
                llPanel.addView(buttonLayout2,lp);

4，分享界面的居中顯示是通過：獲取標題，分享平臺的高度，取消按鈕的高度來設置到layoutParams裏來實現 分享view的居中顯示，且ShareSDK爲我們提供了一個彈窗的動畫效果：

最終PlatformPager類裏的onCreate()方法代碼如下：

/**
	 * 1，整個分享界面是嵌套在一個activity裏的,其有個默認的背景顏色0x4c000000（透明的淡灰色）
	 *    activity.getWindow().setBackgroundDrawable(new ColorDrawable(0x4c000000));
	 *   可以設置爲0x000000全透明增強用戶體驗
	 * 2，initAnims();一個動畫效果方法
	 * 3,即 activity -->llPage(LinearLayout)---addView()方式---->{top(TextView)(點擊空白退出)和 又一個llPanel(LinearLayout)(承載分享界面)[包含：標題textview，分享平臺view，取消分享按鈕] }
	 *
	 */
	public void onCreate() {

		activity.getWindow().setBackgroundDrawable(new ColorDrawable(0x00000000));
		initAnims();

		//llPage即爲嵌套分享彈窗的大UI
		LinearLayout llPage = new LinearLayout(activity);
		llPage.setOrientation(LinearLayout.VERTICAL);
		//分享彈窗嵌套在一個activity裏
		activity.setContentView(llPage);


		//1 上部大textview 默認寬高充滿全屏
		TextView vTop = new TextView(activity);
		vTop.setText("~分享到~");
		vTop.setBackgroundColor(0x00000000);//設置爲透明
//		LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
//		lp.weight = 1;
		LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		lp.setMargins(0,200,0,0);

		vTop.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				finish();
			}
		});
//		llPage.addView(vTop, lp); //textview可以不添加，其設計目的是點擊屏幕空白退出分享界面

		//2分享彈窗的後面背景,在不添加vTop時其爲充滿全屏/並且是分享界面的承載
		llPanel = new LinearLayout(activity);
		llPage.setBackgroundColor(0x00000000);//設置爲透明(佔滿全屏)
		llPanel.setOrientation(LinearLayout.VERTICAL);
		lp = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);

		llPanel.setAnimation(animShow);
		llPage.addView(llPanel, lp);//不能註釋否則分享界面不會出來


		//my add code/////////////增加TextView標題layout/////////////////////
		lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,130);
		lp.setMargins(0,0,0,0);
		LinearLayout buttonLayout = new LinearLayout(activity);
		buttonLayout.setBackgroundColor(Color.GRAY);
		LinearLayout.LayoutParams lp2 = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,110);
		lp2.setMargins(20, 20, 20, 0);
		TextView tv = new TextView(activity);
		tv.setGravity(Gravity.CENTER);
		tv.setText("~分享到~");
		tv.setTextSize(16);
		tv.setTextColor(Color.RED);
		tv.setBackgroundColor(Color.GRAY);
		buttonLayout.addView(tv,lp2);
		llPanel.addView(buttonLayout,lp);
		///////////////

		int title_h = buttonLayout.getLayoutParams().height;

		//3 分享平臺的圖標和名稱
		MobViewPager mvp = new MobViewPager(activity);
		ArrayList<Object> cells = collectCells();
		PlatformPageAdapter adapter = newAdapter(cells);
		lp = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, adapter.getPanelHeight());
		llPanel.addView(mvp, lp);
		//註釋以下6句代碼可隱藏翻頁欄即切換小點
		IndicatorView vInd = new IndicatorView(activity);
		lp = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, adapter.getBottomHeight());
		llPanel.addView(vInd, lp);
		vInd.setScreenCount(adapter.getCount());
		vInd.onScreenChange(0, 0);
		adapter.setIndicator(vInd);
		mvp.setAdapter(adapter);

		int share_view_h = mvp.getLayoutParams().height;

		//my add code/////////////增加取消按鈕layout/////////////////////
		lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,150);
		lp.setMargins(0,0,0,0);
		LinearLayout buttonLayout2 = new LinearLayout(activity);
		buttonLayout2.setBackgroundColor(Color.GRAY);
		LinearLayout.LayoutParams lp22 = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,110);
		lp22.setMargins(20, 20, 20, 20);
		Button button2 = new Button(activity);
		button2.setText("取消分享");
		button2.setTextSize(16);
		button2.setTextColor(Color.BLACK);
		button2.setBackgroundColor(Color.GREEN);
		button2.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				finish();
			}
		});
		buttonLayout2.addView(button2,lp22);
		llPanel.addView(buttonLayout2,lp);

		int button_h = buttonLayout2.getLayoutParams().height;
		///////////////////////
		//獲取標題，分享平臺的高度，取消按鈕的高度來設置到layoutParams裏來實現 分享view的居中顯示
		int h = title_h + share_view_h + button_h;//500
		LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,h);
		int margin_top=getPingmu().heightPixels/2-layoutParams.height/2;
		layoutParams.setMargins(0,margin_top,0,0);
		llPanel.setLayoutParams(layoutParams);

	}

注：getPingmu()是獲取手機屏幕寬高的方法：

private DisplayMetrics getPingmu(){
        WindowManager mag = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics metrics = new DisplayMetrics();
        mag.getDefaultDisplay().getMetrics(metrics);
        return metrics;
    }

我對動畫方法做了一點參數的修改：

private void initAnims() {
		animShow = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 2, Animation.RELATIVE_TO_SELF,-1);
		animShow.setDuration(300);

		animHide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,2);
		animHide.setDuration(300);
	}

好了到此就可以去修改你的code吧。更多的修改細節請查看其官網論壇裏的介紹：http://bbs.mob.com/thread-21313-1-1.html