Lv.Max 를 꿈꾸는 개발자 블로그

[html] Dom 돔 마우스 이벤트 무시, 제거, 비활성화

Fimtrus — Wed, 28 Feb 2018 17:13:03 +0900

웹 화면에 로고와 같이 화면에는 보여야 하지만 클릭이 되지 않아야 하는 뷰가 있을 경우.

아래와 같이 style을 적용시키면 해당 화면에 대한 마우스 이벤트는 사라지게 된다.

pointer-events: none;

HTML 코어에서 정의된 마우스와 관련된 이벤트를 비활성화한다.

[Android]스크롤 뷰 안에 웹뷰가 있을 경우 스크롤 뷰만 스크롤 되는 문제(Webview inside ScrollView scrolled only ScrollView)

Fimtrus — Fri, 28 Jul 2017 10:19:14 +0900

스크롤뷰 안에 스크롤이 필요한 경우

NestedScrollView를 이용하여, 스크롤이 되게 할 수 있는데,

웹뷰의 경우는 웹페이지가 스크롤이 필요한 경우라 NestedScrollView로 해결 할 수 없다.

해당 문제를 해결하기 위해선, 웹뷰에서 발생하는 터치 이벤트를

다른 뷰에 뺏기지 않아야 원하는 결과를 얻을 수 있다.

먼저 웹뷰를 상속 받는 클래스를 하나 만든다.

상속 받은 웹뷰 클래스에 onTouchEvent 메소드를 Overriding 한다.

public class RoadView extends WebView {

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        requestDisallowInterceptTouchEvent(true);
        return super.onTouchEvent(event);
    }
}

requestDisallowInterceptTouchEvent(true)를 추가 하면 웹뷰 단에서 처리할 코드는 완료된다.

이 메소드는 웹뷰에서 발생하는 이벤트를 다른 뷰에서 가로채는 것을 막는 역할을 한다.

따라서 부모뷰인 스크롤뷰가 웹뷰에서 발생하는 이벤트를 가로채지 못하게 된다.

마지막으로 아래와 같이 xml에 적용 하면 스크롤이 가능한 웹뷰가 만들어진다.

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

                <com.fimtrus.test.view.RoadView
                    android:id="@+id/roadview"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:layout_marginBottom="16dp" />
               
        </LinearLayout>
    </ScrollView>
</LinearLayout>

[Android] 툴바(Toolbar)와 맵뷰(MapView) 사용시 지도가 정상적으로 표시되지 않는 문제

Fimtrus — Tue, 16 May 2017 12:20:39 +0900

툴바와 맵뷰를 같이 사용하게 되면 맵뷰 화면이 정상적으로 렌더링이 되지 않는다.

맵뷰 플래그먼트가 자리를 제대로 잡지 못해서 생기는 현상으로 보이는데, 아래와 같이.. 레이아웃을 잡아주면 된다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <include
        layout="@layout/toolbar"/>

    <FrameLayout
        android:id="@+id/layout_content"
        android:layout_below="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"></FrameLayout>

</RelativeLayout>

이코드의 핵심은 android:layout_below="@+id/toolbar"

툴바의 아이디를 써주게 되면 맵이 정상적으로 표시되게 된다..

[jQuery] 제이쿼리에서 아이템 동적 추가후 스타일 적용 문제(select, listview 등)

Fimtrus — Thu, 11 May 2017 09:04:51 +0900

리스트뷰에만 해당하는 것은 아니고, 모든 jquery 위젯에 해당하는 문제인데,

아이템들을 동적 추가하면 jquery에서 자동으로 추가하는 class 들이 해당 dom에 추가되지 않는다.

jquery는 html 화면을 불러들일 때, html을 파싱해서 각각 태그에 맞게 클래스를 추가하게 된다.

dom을 동적으로 추가할 경우, 이 로직을 타지 않기 때문에 jquery 스타일이 적용되지 않는다.

이 문제를 해결하기 위해서는 1줄만 추가해주면 된다.

- listview

$jqueryObject.listview('refresh')

- select

$jqueryObject.selectmenu('refresh')

동적 추가후 화면이 제대로 적용이 되지 않는다면!

refresh를 꼭 해주자!

[HTML] a 태그에 이미지가 보이지 않는다면

Fimtrus — Thu, 11 May 2017 08:54:43 +0900

a 태그에 이미지를 넣을 경우, 사이즈가 0으로 잡혀 이미지가 보이지 않는다.

스타일에 display:block; 을 지정하게 되면 정상적으로 이미지가 보이게 된다.

[Android] Lollipop 버전에서 Support Fragment 화면 갱신이 안될때(ListView, Button 등)

Fimtrus — Thu, 20 Apr 2017 16:32:00 +0900

요즘 안드로이드 개발 추세는 Activity 위에 Fragment를 올리는 형태를 많이 취한다.

그리고 많은 단말기를 지원하기 위해 Support Activity, Support Fragment를 사용한다.

Activity는 FragmentController 역할을, Fragment는 뷰를 제어한다.

나도 위와 같은 형태로 안드로이드 앱 개발을 진행하는데, 가끔 생각지 못한 버그를 접하게 된다.

최근 개발 중에 Fragment의 화면이 갱신이 되지 않는 버그를 접했다.

플래그먼트에 리스트뷰, 그리고 토글 버튼들을 배치 하였는데,

이벤트는 발생을 하나, 화면이 새로 그려지지 않았다.

문제는 FragmentManager를 통해 다른 플래그먼트를 불러오는데,

애니메이션을 적용하게 되면, 새로 불려진 플래그먼트 화면이 갱신이 되지 않았다.

모든 단말기에서 발생하는 문제는 아니고, 특정단말기(롤리팝)에서만 발생하는 이슈였는데 동작하지 않는 이유에 대해 찾기가 쉽지 않았다.

/*
 * 문제의 코드
 */ 
getFragmentManager().beginTransaction()
                .setTransition(FragmentTransaction.
                        TRANSIT_FRAGMENT_FADE)
                .addToBackStack("test")
                .replace(R.id.layout_content, new TestFragment()).commit();

위 코드의 문제점은 setTransition 메소드를 사용하여 플래그먼트가 전환될 때 애니메니션을 적용시켰다는 점이다.

좀 예쁘게 만들려고 적용시켰더니....

그래서 setTransition코드를 제거하고 빌드하니 정상적으로 동작하는 것을 확인할 수 있었다..

/*
 * setTransition 주석 처리..
 */ 
getFragmentManager().beginTransaction()
//                .setTransition(FragmentTransaction.
//                        TRANSIT_FRAGMENT_FADE)
                .addToBackStack("test")
                .replace(R.id.layout_content, new TestFragment()).commit();

Support Library를 사용하여 개발하게 되면 보다 편리하게 구현할 수 있지만

가끔 이런 난감한 문제에 봉착할때가 있다는 사실을 다시금 깨닫게 해주는 이슈였다.

[Android] 스테이터스바 컬러 변경(Change Statusbar Color)

Fimtrus — Fri, 14 Apr 2017 10:40:04 +0900

기본으로 적용시킨 스테이터스바 컬러 이외에

특정 플래그먼트 또는 액티비티에서 스테이터스바 컬러를 변경해야할 때가 있다.

롤리팝 이상 버전부터 코드 상에서 컬러를 변경할 수 있는데

변경하기 위해선 styles.xml 에 아래 코드를 넣어 줘야 한다.( 앱 테마가 적용된 부분)

롤리팝 이상부터 동작하기 때문에 values-v23 에 적용시키면 된다.

<item name="android:windowDrawsSystemBarBackgrounds">true</item>

그리고 아래 메소드를 통해 스테이터스바의 컬러를 변경하면 된다.~

//컬러 코드로 변경(예: #373737)
public static final void updateStatusBarColor (Activity context, String color) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = context.getWindow();
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.parseColor(color));
        }
    }
//컬러 리소스로 변경(예 : R.color.deep_blue)
 public static final void updateStatusBarColor (Activity context, int colorId) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = context.getWindow();
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(ContextCompat.getColor(context, colorId));
        }
    }

[Android] LinearLayout 에 View 동적 추가시 weight 주는 방법

Fimtrus — Thu, 13 Apr 2017 10:27:49 +0900

linearlayout에 하위뷰를 추가해야 하는 경우가 있다.

여러 개가 추가될 경우 좌우 또는 상하 간격을 동일하게 주기 위해 weight 를 줘야 하는데, ViewGroup을 만들어 Parent 뷰로 묶지 않는 이상

xml 단에서 아무리 weight를 줘도, 제대로 동작하지 않는다.

이 문제를 해결하기 위해서는 뷰를 추가할 때 아래와 같이 LayoutParams를 함께 적용 시켜 주면 된다.

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
        layoutParams.weight = 1;
        viewHolder.linearLayout.addView(this.inflater.inflate(R.layout.view_test_item, null, false), layoutParams);
        viewHolder.linearLayout.addView(this.inflater.inflate(R.layout.view_test_item, null, false), layoutParams);
        viewHolder.linearLayout.addView(this.inflater.inflate(R.layout.view_test_item, null, false), layoutParams);
        viewHolder.linearLayout.addView(this.inflater.inflate(R.layout.view_test_item, null, false), layoutParams);
        viewHolder.linearLayout.addView(this.inflater.inflate(R.layout.view_test_item, null, false), layoutParams);

[Android] 안드로이드 버튼 음영 제거(Remove button shadow on Android)

Fimtrus — Mon, 10 Apr 2017 20:32:06 +0900

안드로이드 버튼의 음영을 제거할 필요가 있을 때가 있다.

xml 파일의 button 속성 값을 추가하게 되면 간단하게 해결 된다..

android:stateListAnimator="@null"

[Android] TextSize, 텍스트 사이즈 DIP, DP 코드로 적용 방법

Fimtrus — Wed, 29 Mar 2017 11:39:05 +0900

안드로이드에서 텍스트뷰의 텍스트 크기를 코드로 조절해야될 때가 있다.

여러가지 방법이 있지만 아래 방법을 가장 많이 쓰는 것 같다.

textView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 22)