Android搭建简单的主体界面框架-SlidingPaneLayout

(文章虽然简单,但是总会有适合不同学习阶段的开发者和爱好者学习和交流。转载请注明出处,尊重劳动成果)


【一】大家应该都不会陌生,Android版腾讯QQ有一个主页面,侧滑展开个人设置中心。Menu界面和聊天Home界面还有缩放的效果。

今天我就分享一下我对这种操作的编写经验。以 SlidingPaneLayout 为基础


一下是图片简单展示

①启动之后,侧滑可以展开左边的Menu界面

    


②以下是实际应用在项目中。Menu界面和Home界面只要通过装填各种控件和布局,就可以实现非常漂亮的界面效果了



【二】接下来简单的梳理一下代码都是如何构建的。首先是xml布局代码

<android.support.v4.widget.SlidingPaneLayout
    android:id="@+id/slidingPane"
    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"
    android:background="@mipmap/bg_slidingpane"
    >

    <LinearLayout
        android:id="@+id/menu"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:background="#888"
        android:orientation="vertical"/>

    <LinearLayout
        android:id="@+id/home"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#555"
        android:orientation="vertical"/>
</android.support.v4.widget.SlidingPaneLayout>

【三】接下来是Activity代码(actionbarActivity的重写方法可以忽略)


import android.os.Build;
import android.support.v4.widget.SlidingPaneLayout;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.LinearLayout;

)
public class MainActivity extends ActionBarActivity {

    private SlidingPaneLayout paneLayout;
    private LinearLayout menu, home;

    private DisplayMetrics displayMetrics = new DisplayMetrics();
    private int maxMargin = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        setContentView(R.layout.activity_main);

        paneLayout = (SlidingPaneLayout) findViewById(R.id.slidingPane);
        menu = (LinearLayout) findViewById(R.id.menu);
        home = (LinearLayout) findViewById(R.id.home);

        //设置适当的比例作为边距
        maxMargin = displayMetrics.heightPixels / 10;

        paneLayout.setPanelSlideListener(new SlidingPaneLayout.PanelSlideListener() {
            @Override
            public void onPanelSlide(View panel, float slideOffset) {

                // 如果API大于11
                if (Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB) {

                    //右侧布局发生变化
                    float scale = 1 - ((slideOffset) * maxMargin * 2) / (float) displayMetrics.heightPixels;
                    home.setScaleX(scale);
                    home.setScaleY(scale);
                    home.setPivotX(0);
                    home.setPivotY(displayMetrics.heightPixels / 2);

                    // + 0.1f是为了保证完全右侧划开之后,Home界面的透明度不为全透明
                    home.setAlpha(1 - slideOffset + 0.1f);

                    //左侧布局发生变化
                    float scale2 = 1 - ((1 - slideOffset) * maxMargin * 2) / (float) displayMetrics.heightPixels;
                    menu.setScaleX(scale2);
                    menu.setScaleY(scale2);
                    menu.setPivotX(0);
                    menu.setPivotY(displayMetrics.heightPixels / 2);

                    //Menu直接使用固定透明度
                    menu.getBackground().setAlpha(30);
                }
            }

            @Override
            public void onPanelOpened(View panel) {
                //这里可以对  paneLayout 界面右滑展开之后 进行什么操作
            }

            @Override
            public void onPanelClosed(View panel) {
                //这里可以对  paneLayout 界面左滑关闭之后 进行什么操作
            }
        });
    }

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

【四】好了,今天分享的这一个小知识点大家学会了吗?(喜欢的话,请点击关注我 )

(文章虽然简单,但是总会有适合不同学习阶段的开发者和爱好者学习和交流。转载请注明出处,尊重劳动成果)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值